All of Zebra's digital properties hosted on AEM, including Zebra.com, are built on a responsive grid system so users can have the access to th same content regardless of screen size or device.
All of the pages are based on a 12 column grid with 10px margins and 20px gutters.
Breakpoints for general content
The columns are fluid between breakpoints, so content will adjust accordingly.
|Screen Size||Large Screens||Medium Screens||Small Screens|
|Browser Width||Greater than 800 px||580-800 px||Less than 580 px|
|Maximum Width for Content||1252 px||780 px||559 px|
Breakpoints for Image Components*
Only the Full Width Image component is fluid within the column while other image components may use system generated renditions based on the screen width (see System Breakpoints). The table below are the breakpoints that the image will change to the "mobile" version available when authoring image components.
* does not including the Background Image Layer component which uses the breakpoints for general content
|Screen Size||Large Screens||Small Screens|
|Browser Width||600 px and greater px||Less than 600 px|
|Maximum Width of Image||1252 px||579 px|
These are the breakpoints within the code base. While these are available, the breakpoints above are the screen widths that most components will change visually.
|General Content||1250 px||1080 px||970 px||800 px||700 px||580 px|
|Images*||1280 px||1024 px||768 px||600 px||480 px||320 px|
* renditions built into the responsive image components; does not including the Background Image Layer component
If you have questions about the design, usage, or authoring of pages, please contact the Web Team: