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