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
BedrockMission!

Learn More

View all

Sign in to view all badges

Survey->Mobile Responsive

Avatar

Avatar
Validate 1
MVP
Anita_p
MVP

Likes

116 likes

Total Posts

118 posts

Correct Reply

28 solutions
Top badges earned
Validate 1
Give Back 5
Give Back 3
Give Back 25
Give Back 10
View profile

Avatar
Validate 1
MVP
Anita_p
MVP

Likes

116 likes

Total Posts

118 posts

Correct Reply

28 solutions
Top badges earned
Validate 1
Give Back 5
Give Back 3
Give Back 25
Give Back 10
View profile
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

Avatar

Avatar
Contributor
MVP
wodnicki
MVP

Likes

927 likes

Total Posts

1,061 posts

Correct Reply

494 solutions
Top badges earned
Contributor
Shape 1
Give Back 100
Give Back 50
Give Back 25
View profile

Avatar
Contributor
MVP
wodnicki
MVP

Likes

927 likes

Total Posts

1,061 posts

Correct Reply

494 solutions
Top badges earned
Contributor
Shape 1
Give Back 100
Give Back 50
Give Back 25
View profile
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

Avatar

Avatar
Validate 1
MVP
Anita_p
MVP

Likes

116 likes

Total Posts

118 posts

Correct Reply

28 solutions
Top badges earned
Validate 1
Give Back 5
Give Back 3
Give Back 25
Give Back 10
View profile

Avatar
Validate 1
MVP
Anita_p
MVP

Likes

116 likes

Total Posts

118 posts

Correct Reply

28 solutions
Top badges earned
Validate 1
Give Back 5
Give Back 3
Give Back 25
Give Back 10
View profile
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

Avatar

Avatar
Validate 1
Level 4
somasundaramhal
Level 4

Likes

73 likes

Total Posts

71 posts

Correct Reply

12 solutions
Top badges earned
Validate 1
Shape 1
Boost 50
Boost 5
Boost 3
View profile

Avatar
Validate 1
Level 4
somasundaramhal
Level 4

Likes

73 likes

Total Posts

71 posts

Correct Reply

12 solutions
Top badges earned
Validate 1
Shape 1
Boost 50
Boost 5
Boost 3
View profile
somasundaramhal
Level 4

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

}

}

Avatar

Avatar
Validate 1
MVP
Anita_p
MVP

Likes

116 likes

Total Posts

118 posts

Correct Reply

28 solutions
Top badges earned
Validate 1
Give Back 5
Give Back 3
Give Back 25
Give Back 10
View profile

Avatar
Validate 1
MVP
Anita_p
MVP

Likes

116 likes

Total Posts

118 posts

Correct Reply

28 solutions
Top badges earned
Validate 1
Give Back 5
Give Back 3
Give Back 25
Give Back 10
View profile
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

Avatar

Avatar
Validate 1
Level 4
somasundaramhal
Level 4

Likes

73 likes

Total Posts

71 posts

Correct Reply

12 solutions
Top badges earned
Validate 1
Shape 1
Boost 50
Boost 5
Boost 3
View profile

Avatar
Validate 1
Level 4
somasundaramhal
Level 4

Likes

73 likes

Total Posts

71 posts

Correct Reply

12 solutions
Top badges earned
Validate 1
Shape 1
Boost 50
Boost 5
Boost 3
View profile
somasundaramhal
Level 4

21-10-2019

Share the URL if you don't mind. Will figure out and fix

Avatar

Avatar
Validate 1
MVP
Anita_p
MVP

Likes

116 likes

Total Posts

118 posts

Correct Reply

28 solutions
Top badges earned
Validate 1
Give Back 5
Give Back 3
Give Back 25
Give Back 10
View profile

Avatar
Validate 1
MVP
Anita_p
MVP

Likes

116 likes

Total Posts

118 posts

Correct Reply

28 solutions
Top badges earned
Validate 1
Give Back 5
Give Back 3
Give Back 25
Give Back 10
View profile
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