Intro to breakpoints

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!

We've phased out the visiblity controls. You can hide elements with the same class on different breakpoints from the Style panel.

This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
Intro to breakpoints

You can customize how your site looks on different devices using Webflow's built-in responsive breakpoints (also known as media queries). When you load a project, the default breakpoint is the Desktop view, but there are also three other device breakpoints to work with. This article talks about:

  • Breakpoints
  • Switching breakpoints
  • Customizing your design on breakpoints


Webflow Breakpoints

Currently, Webflow gives you four breakpoint views to preview and style your website for different device sizes.

Webflow Breakpoints

Each view is used to style elements for a particular viewport range:

  • Desktop (Screens larger than 992 pixels includes larger screens, such as desktop displays and laptops)
  • Tablet (screens between 768 and 991 pixels wide)
  • Mobile - Landscape (screens between 767 and 480 pixels)
  • Mobile - Portrait (screens between 479 and 240 pixels)

Switching breakpoints

Whether you are in design mode or in preview mode, you can switch between different breakpoints using the device icons located in the middle of the top bar in the Designer.


You can also drag the edge of the canvas to observe the responsivity of your design within the viewport range of a specific breakpoint.


While reflowing the canvas this way, you can see what devices fall under the current canvas width.

Webflow Breakpoints - devices

Customizing your design on Breakpoints

As you design your site in the default desktop view, the styles automatically cascade down to the smaller breakpoint views. You can switch between the breakpoint views to preview and adjust your design for each device. You can even create different layouts for each breakpoint. However, customizing breakpoints has rules:

  • Styles cascade from larger devices to smaller ones.
  • Styles set on a smaller breakpoint override styles inherited from larger breakpoints, so they no longer inherit style changes from the larger breakpoints.
  • Only changes in the Styles panel cascade down. Any changes on the canvas or in the element settings panel affect all breakpoints. 
  • Deleting or reordering elements affects these element on all breakpoints. You can hide elements on devices by setting its display to "none" in the Style panel.
An example

If you set the width of a div block to 400px on desktop, the width of the div block will still be 400px on mobile unless you change it on another breakpoint.

Let's say you make the width 100% on mobile landscape. This will change the width to 100% on mobile portrait as well while the div block will still have 400px width on desktop and tablet. 

Now, if you change the width on desktop to 500px, both the mobile breakpoints will still have the 100% width value. If you remove the styling on the mobile landscape, the value will be inherited again from the desktop and now the div block will have a width of 500px on all breakpoints.

Cascading styles

Webflow Breakpoints - cascading styles

Breakpoints allow you to set specific style rules for different sized screens. This allows you to customize the design for each device, without breaking it on others. Style changes cascade down from desktop to mobile, which means that all styles you set on your desktop version will automatically apply to the tablet and both mobile device sizes. And, all styles set on Tablet will be carried over to the mobile breakpoints. You can override any styles inherited from a higher breakpoint.

The best approach for responsive design is to start designing for desktop, then move down the device spectrum and adjust your design as needed. Learn more about styling breakpoints.

Changes that affect all breakpoints

When customizing your design on smaller devices, you may be tempted to move elements around, change their settings, or even delete them. You need to keep in mind that these kinds of changes will apply all breakpoints, not just the breakpoint you’re on.

Element Settings

Only changes made in the Styles Panel will cascade down to smaller breakpoints. Any changes in the Settings Panel, or in any settings modal, will impact the element on all breakpoints, regardless of what breakpoint you’re currently editing.


If you replace an image, or the text, or any content on your page while styling on a smaller device, the content will change on all breakpoint views regardless of the current view or device width.


Element Order

You cannot change the order of elements on the Canvas or in the Navigator Panel for a specific viewport by moving elements around. Any re-ordering of elements like this will impact the design on all viewport widths regardless of the current View or device width.

Need to know

You can change the the order of elements on smaller devices by using flex in the Style panel.

You can also change the position and order of elements that are direct children of a grid container on the canvas on any of the breakpoints. Learn more about on-canvas controls of a grid.

Hiding elements on different breakpoints

If you delete an element on any breakpoint view, it will be deleted on all views as well. However, you can hide elements on different breakpoints to create different layouts by setting the display layout to none in the Style panel. Display is a style, so it will apply to all elements with the same class, and the setting will also cascade down to smaller breakpoints.

Although hidden elements are invisible in the website, they still exist in the HTML on the published site.

Browser support

Can I Use ? Data on support for the feature across the major browsers from

Was this helpful?

Thanks for the feedback! If you can, please add additional feedback below.

Oops! Something went wrong while submitting the form

Thank you! Your feedback has been received!

Oops! Something went wrong while submitting the form