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?
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.
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.
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.