Image Dimensions
About Bootstrap and Content Areas
In the Bootstrap framework that we use for responsive design, pages are made up of 12 invisible columns. Every element on the page can span the width of anywhere from 1 to 12 columns. Different column widths can be specified for every breakpoint, so an item may take up 6 columns in the desktop view and expand to the full width of 12 columns in the mobile view. Every content area on the site uses this 12 column layout, even if the area doesn't span the full width of the page (e.g. the area on a category page used for the visual navigation).
While editing/viewing a content area in the CMS, you can specify the width of a block by clicking the block's dropdown menu and selecting a value for Display As. The display options are defined in the code and reflect commonly used column widths that will scale nicely at different breakpoints. If you'd like to see additional options added to this list, please talk to IT. To better explain how your content will look, the options are listed as fractions of the whole. For example, a block using the option Desktop (1/4) Tablet (1/2) Mobile (1/1) will take up 1/4 of the content area's space on the desktop view (or 3 of the 12 columns, 1/2 of the space on a tablet (6 columns), and the full width on a mobile device (12 columns).
Since the width of the content area can vary (e.g. the hero content area vs. the tile content area), the recommended image sizes will vary, but we will keep this page updated with all possibilities. Images can be any height you'd like, but keep in mind that all images that appear on the same row when viewing on the desktop should have the same height.
Full-Width Content Areas (Homepage Tiles)
| Display Option | Image Width |
|---|---|
| All devices full width (1/1) | 1140px |
| Desktop (3/4) Tablet (1/1) Mobile (1/1) | 877px |
| Desktop (2/3) Tablet (2/3) Mobile (1/1) | 750px |
| Desktop (1/2) Tablet (1/2) Mobile (1/1) | 555px |
| Desktop (1/3) Tablet (1/3) Mobile (1/1) | 360px |
| Desktop (1/4) Tablet (1/2) Mobile (1/1) | 262px |
Hero Content Area
| Display Option | Image Width |
|---|---|
| All devices full width (1/1) | 920px |
| Desktop (3/4) Tablet (1/1) Mobile (1/1) | |
| Desktop (2/3) Tablet (2/3) Mobile (1/1) | |
| Desktop (1/2) Tablet (1/2) Mobile (1/1) | |
| Desktop (1/3) Tablet (1/3) Mobile (1/1) | |
| Desktop (1/4) Tablet (1/2) Mobile (1/1) |
Full-Width Heroes
Width: 920px
Height: To use the current site's ratio, use a height of 414px. Otherwise, the height can be whatever you'd like it to be. We may want to establish a specific, constant number of root categories and set the hero height accordingly so it matches the menu's height.
Navigation Banners
Width: 250px
Height: Up to 545px
Bordered Button Images
Width: Use a width smaller than the total block with. For example, if the block is being displayed as Desktop (1/4) Tablet (1/2) Mobile (1/1) in a full-width content area, the block width will be 262px, so a good looking image might be 150px square.