Breakpoints overview

Design your site for small and large screens using responsive breakpoints.

Breakpoints define the screen widths where your layout adjusts to fit different devices — desktops, tablets, phones, and more. Each device that can open your site comes with its own viewport size, and breakpoints let you tailor your design for each one.

When your site loads in Webflow, it starts in the desktop breakpoint. From there, you can customize your design for other screen sizes using built-in responsive breakpoints (also known as media queries).

How breakpoints work in Webflow

Styles cascade bidirectionally from the desktop breakpoint — meaning they flow both up to larger breakpoints and down to smaller ones. Here's how that works in practice:

• Styles set on the desktop breakpoint cascade up to 1280px, 1440px, and 1920px, and down to tablet and both mobile breakpoints
• Styles set on the tablet breakpoint cascade down to mobile landscape and mobile portrait
• Styles set on larger breakpoints (1280px, 1440px, 1920px) cascade up to the next larger breakpoint

You can override any style inherited from a higher breakpoint at any time. It's best practice to start designing on the desktop breakpoint, then move down the device spectrum and adjust as needed.

Determine style inheritance

A style on any breakpoint gets its value in one of two ways:

• It's set directly on that breakpoint
• It's inherited from a cascading breakpoint

For example, a style on the mobile breakpoint might come from the mobile breakpoint itself, or it might have cascaded down from a change made on the tablet breakpoint. To check where a style is coming from, open the Style panel and click the blue or orange labels and icons next to any style property.

How to switch between breakpoints

Breakpoints are located in the canvas bar, which sits above the canvas by default. To move it below the canvas, click the Canvas size (e.g., 1024px) > Advanced settings > Bottom.

To switch breakpoints, click any breakpoint icon in the canvas bar (e.g., the desktop, tablet, mobile landscape, or mobile portrait icon).

How to add larger breakpoints

You can enable three larger breakpoints: 1280px, 1440px, and 1920px. Once added, the new breakpoint appears in the canvas bar. If you switch to a larger breakpoint while on a laptop or smaller screen, the canvas automatically scales down to fit.

To add a larger breakpoint:

1. Click the Options icon in the canvas bar
2. Choose a larger breakpoint to add
3. Click Create to confirm and switch to the new breakpoint

How to style elements on different breakpoints

By default, all breakpoints inherit styles from the desktop (base) breakpoint. You can override cascading styles for any breakpoint at any time by making changes while on that specific breakpoint. For example, if you change the Body background color on the tablet breakpoint, the desktop and 1280px+ breakpoints keep the original color — but the tablet and both mobile breakpoints show the new color, because styles set on the tablet breakpoint only cascade down.

Each breakpoint view applies styles to a specific viewport range:

• 1920px — applies to screens 1920px wide and above
• 1440px — applies to screens 1440px wide and above
• 1280px — applies to screens 1280px wide and above
• Desktop (base) — applies to all devices unless overridden at other breakpoints
• Tablet — applies to screens 991px wide and below
• Mobile landscape — applies to screens 767px wide and below
• Mobile portrait — applies to screens 479px wide and below

A few rules to keep in mind when overriding styles across breakpoints:

• Styles cascade from desktop in both directions — smaller breakpoints cascade down (tablet > mobile landscape > mobile portrait) and larger breakpoints cascade up (1280px > 1440px > 1920px)
• Styles set on a smaller breakpoint override styles from the breakpoint above (e.g., mobile landscape overrides tablet)
• Styles set on a larger breakpoint override styles from the breakpoint below (e.g., 1440px overrides 1280px)
• Once you override a style, it no longer inherits changes from the breakpoints above it (for smaller breakpoints) or below it (for larger breakpoints)

Changes that apply to all breakpoints

Only changes made in the Style panel cascade up and down. The exceptions are these options available to content editors, which apply to all breakpoints regardless: Grid editing and Quick Stack

Changes made outside the Style panel also 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 breakpoint view.

Element hierarchy and order:

Any change to element order or placement — on the canvas or in the Navigator — affects all breakpoints. You can't reorder elements for a specific breakpoint by moving them around. When you delete an element, it's removed on all breakpoints. If you want an element to appear only on certain breakpoints, you can hide it instead.

Content:

When you replace an image, text, or any other content on your site, the change applies across all breakpoint views.

Hide elements on different breakpoints

Deleting an element removes it on all breakpoints. To make an element invisible on a specific breakpoint without deleting it, go to Style panel > Layout and set the element's display to none. Keep in mind that display is a style, so it applies to all elements sharing the same class and cascades down to smaller breakpoints.

Clear styles

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

When you clear a style that cascades to other breakpoints, it's cleared on all of them. For example, if a style is set on the tablet breakpoint and cascades down to both mobile breakpoints, clearing it on tablet also clears it on mobile landscape and mobile portrait.