screenshot all viewports

X-Small (XS)

X-Small

Screenshot xs view
Screenshot xs view

Definition

Screen size

0px - 767px

Grid

  • 12 Grid
  • Gutter (white) 20px - fixed
  • Columns (grey) - flexible
  • Margin (blue) 20px - fixed
  • Content width - flexible

Small (S)

Small

Screenshot s view
Screenshot s view

Definition

Screen size

768px - 1023px

Grid

  • 24 Grid
  • Gutter (white) 20px - fixed
  • Columns (grey) - flexible
  • Margin (blue) 34px - fixed
  • Content width - flexible

Medium (M)

Medium

screenshot medium viewport
Screenshot m view

Definition

Screen size

1024px - 1279px

Grid

  • 24 Grid
  • Gutter (white) 24px - fixed
  • Columns (grey) - flexible
  • Margin (blue) 42px- fixed
  • Content width - flexible

Large (L)

Large

Screenshot L view
Screenshot L view

Definition

Screen size

1280px - 1439px

Grid

  • 24 Grid
  • Gutter (white) 40px - fixed
  • Columns (grey) - flexible
  • Margin (blue) 64px - fixed
  • Content width - flexible

X-large (XL)

X-Large

screenshot xl-view
Screenshot XL view

Definition

Screen size

1440px and larger

Grid

  • 24 Grid
  • Gutter (white) 40px - fixed
  • Column (grey) - flexible
  • Margin (blue) min. 75px - flexible
  • Content width 1290px - maximum

Reference for publisher

On the chrome-browser, clicking "F12", opens DevTools, where you can check responsiveness.

Crosslinks