Design for even larger screens with 3 new breakpoints

Now you can customize your designs for larger screens with new device breakpoints at 1280px, 1440px, and 1920px.

Barrett Johnson
April 9, 2020
Announcements

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

Customize your design for larger screens with new breakpoints at 1280px, 1440px, and 1920px.
Customize your design for larger screens with new breakpoints at 1280px, 1440px, and 1920px.

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
Build CSS grid layouts — visually

Experience the unprecedented ease, speed, and power of CSS grid layout in Webflow — with all-new on-canvas controls.

Subscribe to be a Webflow Insider
Thank you! You are now subscribed!
Oops! Something went wrong while subscribing.

How the new breakpoints affect styles on other devices

Styles applied at the new breakpoints cascade up, while styles applied at the existing breakpoints cascade down to smaller devices.
Styles applied at the new breakpoints cascade up, while styles applied at the existing breakpoints cascade down to smaller 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.

To add a breakpoint, select it from the dropdown menu. Once you’ve added it, it will stay in the top navigation. (Note: at the moment, once you’ve added one of these larger breakpoints, you cannot remove them from the top UI bar.)
To add a breakpoint, select it from the dropdown menu. Once you’ve added it, it will stay in the top navigation. (Note: at the moment, once you’ve added one of these larger breakpoints, you cannot remove them from the top UI bar.)

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!

Barrett Johnson

Product marketing @webflow. Design, history, and music enthusiast.

You might also like...

More

Join the conversation

What's Webflow?

Try it for free
Designer

Designer

The power of CSS, HTML, and JavaScript in a visual canvas.

Interactions

Interactions

Build website interactions and animations visually.

CMS

CMS

Define your own content structure, and design with real data.

Ecommerce

Ecommerce

Goodbye templates and code — design your store visually.

Editor

Editor

Edit and update site content right on the page.

Hosting

Hosting

Set up lightning-fast managed hosting in just a few clicks.