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

Dynamic Banner on Desktop Web Viewer

Avatar

Avatar
Validate 1
Level 1
JoSchro
Level 1

Likes

2 likes

Total Posts

24 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile

Avatar
Validate 1
Level 1
JoSchro
Level 1

Likes

2 likes

Total Posts

24 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile
JoSchro
Level 1

12-07-2017

I have a dynamic banner on a collection page, and it works fine on the iPad and iPhone. However, when I go to preview on the Desktop Web Viewer, it treated it as iPad size, instead of the larger size for desktop. I tested this with the same file created as an article and it works fine in the Desktop Web Viewer. Why is this happening with the dynamic banner, and how can I get it to work properly in the Desktop Web Viewer?

Accepted Solutions (0)

Answers (6)

Answers (6)

Avatar

Avatar
Validate 1
Level 1
JoSchro
Level 1

Likes

2 likes

Total Posts

24 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile

Avatar
Validate 1
Level 1
JoSchro
Level 1

Likes

2 likes

Total Posts

24 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile
JoSchro
Level 1

17-07-2017

Hi Ivan: Yes, I do have media queries defined in the CSS.

Avatar

Avatar
Boost 50
Employee
Ivan_Mironchuk
Employee

Likes

50 likes

Total Posts

133 posts

Correct Reply

43 solutions
Top badges earned
Boost 50
Validate 1
Unlock
Ignite 3
Ignite 1
View profile

Avatar
Boost 50
Employee
Ivan_Mironchuk
Employee

Likes

50 likes

Total Posts

133 posts

Correct Reply

43 solutions
Top badges earned
Boost 50
Validate 1
Unlock
Ignite 3
Ignite 1
View profile
Ivan_Mironchuk
Employee

16-07-2017

Hi JoSchro - Do you have any media queries defined in the dynamic banner?

Avatar

Avatar
Validate 1
Level 1
JoSchro
Level 1

Likes

2 likes

Total Posts

24 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile

Avatar
Validate 1
Level 1
JoSchro
Level 1

Likes

2 likes

Total Posts

24 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile
JoSchro
Level 1

12-07-2017

That does make sense, thank you. So this let's me know that if I'm building a page through the Layout Template editor, the max width of the desktop web viewer is 960px. Seems very narrow to me, especially since almost all desktop computers have screen widths of at least 1366px.

Avatar

Avatar
Boost 1
Level 1
bhellema
Level 1

Like

1 like

Total Posts

17 posts

Correct Reply

2 solutions
Top badges earned
Boost 1
Affirm 1
View profile

Avatar
Boost 1
Level 1
bhellema
Level 1

Like

1 like

Total Posts

17 posts

Correct Reply

2 solutions
Top badges earned
Boost 1
Affirm 1
View profile
bhellema
Level 1

12-07-2017

The AEM Mobile Layout Template Editor has the three layouts, Phone, Tablet, and Web.  These will give you a representation of how the browse pages should look like on each of the device groups. That said, the Web layout UI does not give an accurate presentation of the layout if you select different breakpoints as the Desktop Web Viewer is not responsive like that of the AEM Mobile Layout Template Editor.  I hope this makes sense.

Avatar

Avatar
Validate 1
Level 1
JoSchro
Level 1

Likes

2 likes

Total Posts

24 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile

Avatar
Validate 1
Level 1
JoSchro
Level 1

Likes

2 likes

Total Posts

24 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile
JoSchro
Level 1

12-07-2017

Thank you for your response. So this max width of 960px only applies to pages created within the AEM Mobile portal? The HTML article displays fine in the Desktop Web Viewer.

Avatar

Avatar
Boost 1
Level 1
bhellema
Level 1

Like

1 like

Total Posts

17 posts

Correct Reply

2 solutions
Top badges earned
Boost 1
Affirm 1
View profile

Avatar
Boost 1
Level 1
bhellema
Level 1

Like

1 like

Total Posts

17 posts

Correct Reply

2 solutions
Top badges earned
Boost 1
Affirm 1
View profile
bhellema
Level 1

12-07-2017

The Web Viewer has limitations that the size is defined to be rendered at 960px, it does not support scaling due to design restrictions in the viewer.  You'll therefore have the gutters on the left and right of the cards that are full width. 

Screen Shot 2017-07-12 at 2.45.02 PM.png