Design for even larger screens with 3 new breakpoints

Documentation

→

As laptops and external monitors keep getting bigger, Webflow’s keeping up with the times by adding not 1, not 2, but 3 new large breakpoints at 1280px, 1440px, and 1920px.

Styles applied at the new larger breakpoints cascade up, while styles applied at the existing breakpoints cascade down to smaller devices.

This means that Webflow projects now have 7 breakpoints, with the largest 3 being the new ones:

1920px: styles applied to screens 1920px wide and above
1440px: styles applied to screens 1440px wide and above
1280px: styles applied to screens 1280px wide and above
Desktop (base): styles apply to all devices unless overridden at other device breakpoints
Tablet: styles applied to screens 991px wide and below
Mobile landscape: styles applied to screens 767px wide and below
Mobile portrait: styles applied to screens 478px wide and below

For a closer look at these changes and a walkthrough of updating a site to use these new breakpoints, check out our announcement blog post.

As laptops and external monitors keep getting bigger, Webflow’s keeping up with the times by adding not 1, not 2, but 3 new large breakpoints at 1280px, 1440px, and 1920px.

This means that Webflow projects now have 7 breakpoints, with the largest 3 being the new ones:

1920px: styles applied to screens 1920px wide and above
1440px: styles applied to screens 1440px wide and above
1280px: styles applied to screens 1280px wide and above
Desktop (base): styles apply to all devices unless overridden at other device breakpoints
Tablet: styles applied to screens 991px wide and below
Mobile landscape: styles applied to screens 767px wide and below
Mobile portrait: styles applied to screens 478px wide and below

For a closer look at these changes and a walkthrough of updating a site to use these new breakpoints, check out our announcement blog post.

Launched on

April 9, 2020