Responsive Grid

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

System Breakpoints

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.

  Maximum XLarge Large Medium Small XSmall
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: