Highlighted

Survey->Mobile Responsive

Anita_p

MVP

16-10-2019

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

Replies

Highlighted

wodnicki

MVP

17-10-2019

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

Highlighted

Anita_p

MVP

17-10-2019

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

Highlighted

somasundaramhal

18-10-2019

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%;

}

}

Highlighted

Anita_p

MVP

20-10-2019

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

Highlighted

Anita_p

MVP

21-10-2019

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