Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

The 4th edition of the Campaign Community Lens newsletter is out now!

Survey->Mobile Responsive

Avatar

Community Advisor

Hi

I created a survey in Adobe Campaign and I am having trouble with the mobile rendering -> need it Mobile Responsive.

I tried below piece of code (shared in this forum for the similar issue) in my custom CSS but still no luck:

Screen Shot 2019-10-17 at 9.17.27 am.png

Please suggest what else I should add in my custom CSS to make it responsive on mobile?

Thanks,

Anita

6 Replies

Avatar

Community Advisor

Hi,

Add this tag to <head/>:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

You'll probably want some @media conditional blocks in the css too, depending on what the content's supposed to look like at different res. What is div.page?

Thanks,

-Jon

Avatar

Community Advisor

Thanks Jon for your response.

I have added the code you have shared but that also did not really help .

Here is the "div.page" :

Screen Shot 2019-10-18 at 2.21.12 pm.png

Please let me know what should I add here?

Thanks,
Anita

Avatar

Level 5

Mobile responsiveness doesn't rely only on the root node width. If you have specified width inside the root node/ if width is specified in any child node, that needs to be updated to 100% in media query.

eg:

@media(maxwidth:1200px) and (min-width:320px) {

.yourClassname1,

.yourClassname2 {

     width:100%;

}

}

Avatar

Community Advisor

Thank You somasundaramhaldurai​ .

I have already tried media query for some std screen sizes. But somehow the rendering is not consistent.

I will try modifying the code in CSS and see if it works.

Regards,
Anita

Avatar

Community Advisor

Hi somasundaramhaldurai .

Thank you . I won't be able to share the URL but i will reach out if I still face any issues with the CSS.

Appreciate your help.

-Anita