Documentation Center

Responsive design screen breakpoints

The responsive design implementation caters to four different screen widths, and also uses a set of fixed image widths to provide an optimized responsive experience for a variety of device types.

Browser screen widths

SizeWidth

(in pixels)

Device typeViewport

(in pixels)

Max no. of

columns

Large1140 or moreLarge tablet, laptop, monitor or TV1024 (centered)none
Medium940-1139Tablet in landscape orientationmaximum browser width, up to 1024 (centered)none
Small*480-939Tablet in portrait orientation or smartphone in landscape orientationmaximum browser width2
Extra small*less than 480Smartphone in portrait orientationmaximum browser width1

Image widths

Images are dynamically resized to fit the layout where they are rendered and device/browser capabilities of the requesting client. As there is a large variety of device display widths, we limit image resizing to a fixed set of image widths, to optimize caching of resized images.

SDL Digital Experience Accelerator selects one of these following image widths based on the following factors:
  • Browser display width
  • Browser pixel ratio
  • Column and content layout
Width

(in pixels)

Example of use
2048Full viewport width image on a large, x2 pixel ratio ("retina") display
1024Full viewport width image on a large non-retina display
640Full width image on a typical small (smartphone) retina display, portrait orientation
320Full width image on a typical small (smartphone) non-retina display, portrait orientation
160Thumbnail