Breakpoints overview

Customize your designs for small and large screens using Webflow’s built-in responsive breakpoints.

Each device capable of accessing your website — desktop computers, tablets, large phones, small phones, even smartwatches — has a different viewport size (i.e., a different screen size) to view web content. A breakpoint is the screen width at which a site’s layout will change to fit the viewport.

When you load your site, the default breakpoint is the desktop view, but you can customize your site’s design for different screen sizes using Webflow’s built-in responsive breakpoints (sometimes called “media queries”). 

How to use breakpoints

Style changes cascade both up and down (i.e., bidirectional cascade). They cascade up to larger viewports starting from 992px (desktop) and down to smaller viewports from desktop to mobile. In other words, styles applied on desktop, 1280px, 1440px, and 1920px cascade up to larger devices, while styles applied on the desktop breakpoint cascade down to tablet and mobile device sizes. All styles set on the tablet carry over to the mobile breakpoints (i.e., mobile landscape and mobile portrait). You can override any style changes inherited from a higher breakpoint.

The bidirectional cascade applies to textual styles unless you override them. You can use breakpoints to customize your designs for small and large screens. It’s best practice for responsive design to start designing for the desktop breakpoint, then move down the device spectrum and adjust your design as needed.

Switch between breakpoints

You can switch between different breakpoints using the device icons in the bottom or top bar of your site. You can also resize your site’s canvas to preview your site’s responsiveness on different devices.

Determine style inheritance

Styles can receive their values in two different ways:

1. A style is set on a specific breakpoint
2. A style is inherited from a cascading breakpoint

For example, a style on the mobile breakpoint can be from the mobile breakpoint or from a change on the tablet breakpoint that cascaded down. You can view the inheritance of a style in the Style panel by clicking the blue or orange labels and icons next to style properties.

How to add larger breakpoints

In addition to Webflow’s four preset breakpoints (i.e., desktop, tablet, mobile landscape, and mobile portrait), you can optionally add three larger breakpoints: 1280px, 1440px, and 1920px.

To add a breakpoint, click the breakpoint in the top bar of your site and choose Add large breakpoint.

Once you add a breakpoint, it will be auto-selected as the active breakpoint and appear in your site’s context bar.

If you’re designing on a laptop or if your browser’s viewport is narrower than some of the larger breakpoints, the canvas will automatically scale down. You can also manually enter values in canvas settings.

How to style elements on different breakpoints

By default, all breakpoints inherit styles from the desktop (base) breakpoint. You can override cascading styles for a breakpoint at any time by changing the values while on that specific breakpoint.

For example, you could change the Body background color on the tablet breakpoint. The background color on the desktop and breakpoints 1280px and above will stay the same, but the tablet breakpoint and both mobile breakpoints (i.e., mobile landscape and mobile portrait) will show the newly updated background color — because styles set on the tablet breakpoint only cascade down to smaller breakpoints.

Each breakpoint view lets you style elements for a particular viewport range:

• Styles set on the 1920px breakpoint apply to screens 1920px wide and above
• Styles set on the 1440px breakpoint apply to screens 1440px wide and above
• Styles set on the 1280px breakpoint apply to screens 1280px wide and above
• Styles set on the desktop (base) breakpoint apply to all devices unless overridden at other device breakpoints
• Styles set on the tablet breakpoint apply to screens 991px wide and below
• Styles set on the mobile landscape breakpoint apply to screens 767px wide and below
• Styles set on the mobile portrait breakpoint apply to screens 478px wide and below

You can override any textual styles inherited from other breakpoints and create different layouts for each breakpoint. 

There are a few rules for overriding styles on different breakpoints:

• Styles cascade up and down from the desktop breakpoint, so styles applied to smaller breakpoints cascade down (tablet > mobile landscape > mobile portrait) and styles applied to larger breakpoints cascade up (1280px > 1440px > 1920px)
• Styles set on breakpoints smaller than the desktop breakpoint override styles set on the breakpoint above (e.g., styles set on the mobile landscape breakpoint override styles set on the tablet breakpoint)
• Styles set on breakpoints larger than the desktop breakpoint override styles set on the breakpoint below (e.g., styles set on the 1440px breakpoint override styles set on the 1820px breakpoint)
• Styles you override no longer inherit changes from the breakpoints above (on breakpoints smaller than desktop) or below (on breakpoints larger than desktop)

Changes that apply to all breakpoints

Only changes made in the Style panel cascade up and down, with the exception of grid edit mode, where you can edit the grid’s styles directly on the canvas (and those styles also cascade up and down). This also applies to edit mode for Quick Stack. Changes made outside of the Style panel apply to all breakpoints.

Element settings

Any changes in the Element settings panel (or in any settings menu) apply to all breakpoints, regardless of the current view or device width.

Element hierarchy/order

Any change in the element hierarchy or order (on the canvas or in the Navigator) affect all breakpoints. You can’t change the order or placement of elements on a specific breakpoint by moving elements around. When you delete an element, the element is removed on all breakpoints. If you want an element to appear only on certain breakpoints, you can hide the element.

Content

When you replace an image, text, or any content on your site, the content changes on all breakpoint views regardless of the current view or device width.

Hide elements on different breakpoints

When you delete an element on any breakpoint view, the element is removed on all breakpoints. However, you can hide elements on different breakpoints by going to Style panel > Layout and setting the element’s display to none. Note that display is a style, so it applies to all elements with the same class and cascades down to smaller breakpoints.

Clear styles

You can clear a set style value anytime by clicking the blue or pink text or icon next to the style and choosing Reset. You can also press Opt + click on the indicator (on Mac) or Alt + click on the indicator (on Windows).

When you clear styles inherited by other breakpoints (i.e., styles that cascade up and/or down to other breakpoints), they’re cleared on all breakpoints. For example, if you have a style on the tablet breakpoint that cascades down to the mobile breakpoints, clearing that style on the tablet breakpoint will also clear that style on the mobile breakpoints.