Agencies
Services
Breakpoints & Responsive Grid
Authoring a page in Adobe Experience Manager (AEM) requires users to set column widths for specific device breakpoints. Authors create page content by default in the Desktop view, however, the State of Illinois implementation focuses on 2 main sizes, determined by pixel width:
- Desktop - Which is any device displaying at a width of 769 pixels or larger.
- Mobile - Which is any device displaying at a width of less than 769 pixels.
Desktop View: 769px and Above
Components may layout differently depending on device widths and available space.
For example, the below images depict how a Full-Width and Left-Navigation page displays in Desktop view. We can see the Side Navigation has room to adjust and fit next to the main page content on the Left-Navigation Page Sidebar.
FULL-WIDTH PAGE
LEFT-NAVIGATION PAGE w/SIDE navigation
Mobile View: 768px and Below
However, in the Mobile view, we can see that the Left-Navigation Page's Side Navigation doesn't have room, and thus, we have a different layout on Mobile devices so this element is viewable, readable, and usable. The Side Navigation component is on it's own row on Mobile devices.
FULL-WIDTH PAGE
LEFT-NAVIGATION PAGE W/SIDE NAVIGATION