Breakpoints

Predefined screen widths to provide an optimal and responsive user experience across devices, based on the most popular device screen sizes.

Specs

Dimensions

Layout will adjust based on the following responsive breakpoints:

Width Range

Device Type

Breakpoint Name

375px - 767px

Phones & Small Tablets

small

768px - 1023px

Tablets & Small Laptops

medium

1024px - 1279px

Laptops & Smaller Desktops

mediumlarge

1280px - 1439px

Laptops & Smaller Desktops

large

1440px - 1919px

Desktop

xlarge

1920px +

Large Desktop

xxlarge

Artboard defaults

The defaults below are based on user screen size data in Amplitude. To review for yourself, visit Amplitude for Desktop and/or Native app.

  • Desktop: 1440px (Desktop)
  • Tablet: 834px (iPad Pro 11)
  • Phone: 390px (iPhone 13)

Scaling content

When scaling a layout for different screen sizes or orientations, the responsive grid adjusts margin and body widths as well as the number of columns in the layout. The body remains responsive to increases in size wheras the side bavbar is less dynamic - it is recommended to not adjust it’s size.