As laptops and external monitors keep getting bigger, Webflow’s keeping up with the times by adding not one, not two, but three new large breakpoints at 1280px, 1440px, and 1920px.
If you’ve been paying extra close attention to our recent updates, you might have seen this coming when we added controls to resize the Designer canvas back in December. Or maybe you read about it in our Q4 product updates roundup. Either way, they’re here now, so let’s dig into what these new breakpoints are, and how they work.
3 new large device breakpoints
Today’s release adds 3 new breakpoints to the existing 4 that have been in Webflow since the early days. This means that Webflow projects now have 7 breakpoints, with the largest 3 being the new ones:
- 1920px: styles apply to screens 1920px wide and above
- 1440px: styles apply to screens 1440px wide and above
- 1280px: styles apply to screens 1280px wide and above
- Desktop (base): styles apply to all devices unless overridden at other device breakpoints
- Tablet: styles apply to screens 991px wide and below
- Mobile landscape: styles apply to screens 767px wide and below
- Mobile portrait: styles apply to screens 478px wide and below
Experience the unprecedented ease, speed, and power of CSS grid layout in Webflow — with all-new on-canvas controls.
Experience the unprecedented ease, speed, and power of CSS grid layout in Webflow — with all-new on-canvas controls.
How the new breakpoints affect styles on other devices
It’s important to note that these new breakpoints apply styles to screens of a given width and above, as opposed to the existing breakpoints below desktop, which apply styles to screens of a given width and below. This means that styles applied for the new breakpoints cascade up to larger devices, while styles applied at the existing breakpoints below desktop cascade down to smaller devices.
How it works: the new breakpoints in action
To keep things tidy in the top bar of the Designer, we’ve kept the 3 larger breakpoints behind a dropdown menu so you can individually add the ones you need. To add styles at a new breakpoint, open up that breakpoint dropdown and select the breakpoint you’d like to add. Once you’ve selected it, it’ll appear in the top nav along with the others.
At the moment, once you’ve added one of these larger breakpoints, you cannot remove them from the top UI bar. That said, you can eliminate all the unique styles attached to that breakpoint by switching to that breakpoint and hitting Option + click on Mac (Alt + click on Windows) on the styles whose labels are blue, which indicates they have styles set for this specific device.
How will you use these new breakpoints in your sites? Let us know in the comments!
