Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

Dynamic Banner on Desktop Web Viewer

Avatar

Level 2

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?

6 Replies

Avatar

Level 2

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

Avatar

Level 2

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

Level 2

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

Level 2

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

Employee Advisor

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

Avatar

Level 2

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