How do I add a larger breakpoint in Webflow?

Add 1280, 1440, or 1920 from the canvas bar

Webflow starts you on the desktop breakpoint. From there you can add three larger ones: 1280px, 1440px, and 1920px.

Click the Options icon in the canvas bar. Choose the larger breakpoint you need. Click Create. The new breakpoint appears in the canvas bar, and the Designer switches to it. If you are on a laptop or a smaller screen, the canvas scales down so that wide frame still fits.

Each larger breakpoint applies at that width and above:

• 1280px applies to screens 1280px wide and above
• 1440px applies to screens 1440px wide and above
• 1920px applies to screens 1920px wide and above

Desktop is the base. It applies to all devices unless you override a style on another breakpoint. You do not add tablet or the two phone widths. They are already there. Tablet applies at 991px wide and below. Mobile landscape applies at 767px and below. Mobile portrait applies at 479px and below.

To move between breakpoints, click the icon in the canvas bar. You can also drag the edge of the canvas on the breakpoint you are viewing when you want to test a width that is not one of these defaults.

A larger breakpoint stays on the site

Once you add a larger breakpoint, it cannot be removed. Add one when you will actually set styles for wide screens. If you only want to look at a wide layout, drag the canvas edge instead of clicking Create.

If you already added one and want to remove the styles you set there, switch to that breakpoint. Blue labels mark styles set on it. Option-click those labels on a Mac, or Alt-click them on Windows. You can also click the blue or pink label and choose Reset. Clearing a style that cascades also clears it on the breakpoints that inherited it. The breakpoint itself remains in the bar.

That is a site-level choice, not a per-page switch. Do not add 1920px on a quiet afternoon just to peek at the homepage. The peek is the canvas edge. Create is the permanent breakpoint.

Override on the wide breakpoint, not by editing desktop again

Styles set on desktop cascade up to 1280px, 1440px, and 1920px, and they cascade down to tablet and both mobile widths. A style set on a larger breakpoint cascades up to the next larger one. It overrides the breakpoint below it for the screens that use the larger width. A change at 1440px overrides 1280px on those wider screens. It does not flow back down to desktop.

Start on desktop. Then switch to the larger width and change only what should differ there. Once you override a property, it no longer inherits later edits from the breakpoint below it. If you later change the desktop size, the overridden wide size stays where you set it.

Example: the hero heading is comfortable on a laptop and looks sparse on a very wide monitor. Add 1440px, switch to it, and set a different size or a narrower width on that heading's class. Leave desktop as it is. Tablet and both phones keep the styles they already use, unless you had overridden them on those smaller breakpoints.

Click the blue or orange label next to a property to see where the value comes from. A value set on this breakpoint is not the same as a value that cascaded in. The mobile layout guide is the pass when a phone layout scrolls sideways or overlaps. A 1920px frame will not repair a 479px page. Fix the smaller breakpoint for that.

A style set on tablet still cascades only downward, to both mobile widths. Adding a large breakpoint does not change that.

Content and order still apply on every width

Only changes in the Style panel cascade up and down. Grid editing and Quick Stack are the exception that still applies on every breakpoint, so they are not a wide-only layout. Replacing an image, replacing text, or any other content change also applies on every breakpoint. Moving or deleting an element, on the canvas or in the Navigator, applies everywhere too. You cannot drag a block into a new order on the 1440px view alone.

When a smaller screen needs a different sequence, use flex child order, or the order of a direct grid child. The order guide is that control. When something should disappear on one width only, set Display to none on that breakpoint instead of deleting it. The hide guide is display none. A display value set on desktop also cascades up to larger breakpoints you have added, so check the wide frame after you hide something on desktop.

Settings outside the Style panel apply to all breakpoints, no matter which one you are viewing. A link, a form setting, or another element setting changed while you are on 1920px is not a wide-only setting. It changes the element everywhere.

Look at the wide frame, desktop, and a phone

After you add the breakpoint, check three views before you publish. The wide frame shows the override you wanted. Desktop still shows the design you had. A phone width did not pick up a value you set only on the large breakpoint.

You can compare the frames together. In the canvas bar, click the Expand canvas icon, then select a frame from the Navigator or click the frame on the canvas. Click the Focus canvas icon when you want a single breakpoint again.

Publish, then open the live site in a wide window and on a phone. The large breakpoint is a style rule for wide screens. It is not a separate page, and it does not change the words unless you edited the content.

Adding a wide breakpoint on a site you already have is ordinary layout work. The membership is one plan for every existing Webflow site: $999 per month, including 10 hours of Webflow work. Additional work is $75 per hour and starts only after you approve a written estimate.