Intro to breakpoints

Learn how to customize your designs for small and large screens using Webflow's 7 built-in responsive breakpoints.

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
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 your site design for different screen sizes 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 6 additional breakpoints. 

In this lesson:

  1. Styling on different breakpoints 
  2. Adding larger breakpoints
  3. Scaling the canvas
  4. Overriding styles on breakpoints 
  5. Clearing styles
  6. Testing responsiveness and fluidity

Styling on different breakpoints

Style changes cascade both up and down (bidirectional cascade). They cascade up starting from 992px (desktop) and down from desktop to mobile. This means that styles applied on desktop, 1280px, 1440px, and 1920px cascade up to larger devices and styles you set on the desktop breakpoint cascade down and apply to the tablet and both mobile device sizes. All styles set on Tablet will be carried over to the mobile breakpoints. You can override any styles inherited from a higher breakpoint.

This cascading nature applies to textual styles unless a style is overwritten. Learn how to customize your designs for small and large screens in Intro to breakpoints.

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 top bar of the Designer.

You can also resize the Designer canvas to preview your site’s responsiveness on different devices. 

While resizing the canvas, you can see what devices fall under the current canvas width.

Determining style inheritance

Styles can get their value in two different ways:

  1. It’s set on a specific breakpoint
  2. It’s 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 see the inheritance of a style in the Style panel by clicking the blue or orange labels and icons next to style properties.

Adding larger breakpoints

A breakpoint is a specific size that applies style changes to a specific width so a site can be responsive as it scales up and down. 

Webflow has 4 preset breakpoints: 

  1. Desktop
  2. Tablet
  3. Mobile Landscape
  4. Mobile Portrait 

You also have the option to add 3 larger breakpoints:

  1. 1280px
  2. 1440px
  3. 1920px 

To add a breakpoint, click the breakpoint dropdown (to the left of the desktop icon in the top toolbar) and choose from the dropdown. 

The breakpoint you add will show up in the top bar and automatically be selected. 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.

Scaling the canvas

If you’re designing on a laptop or if your browser’s viewport is narrower than some of the larger breakpoints, the canvass will automatically scale down. 


On a 16” MacBook Pro, elements on the canvass will scale down to 75.6% to preview what a design looks like on a browser 1920px wide. 

You can also manually enter values inside the canvas settings from the dropdown. 

By setting the canvas side to 2560, elements on the canvas will scale down, simulating the full width of a 27” iMac.

Overriding styles on breakpoints

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

Let’s change the background color to purple on the tablet breakpoint. Now when we look at desktop or breakpoints 1280px and above, the background remains the same as before — green. Both mobile breakpoints however, show the newly updated purple background color. This is because styles applied on the tablet breakpoint will only cascade down to smaller breakpoints (mobile, landscape, and portrait). 


These 7 breakpoint views let you preview and style your website for different device sizes.

As you design your site, styles applied at the default desktop view cascade up and down across all breakpoints, styles applied at smaller breakpoints cascade down, and styles applied at larger breakpoints cascade up.

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

  • 1920px: styles applied to screens 1920px wide and above
  • 1440px: styles applied to screens 1440px wide and above
  • 1280px: styles applied to screens 1280px wide and above
  • Desktop (base): styles apply to all devices unless overridden at other device breakpoints
  • Tablet: styles applied to screens 991px wide and below
  • Mobile landscape: styles applied to screens 767px wide and below
  • Mobile portrait: styles applied to screens 478px wide and below

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

Here are the rules for customizing breakpoints:

  1. Styles cascade up and down from desktop, so everything right of desktop cascades down (tablet > mobile landscape > mobile portrait) and everything to the left of desktop cascades up (1280px > 1440px > 1920px)
  2. Styles set on mobile portrait override styles inherited from tablet, so the specific styles you override no longer inherit changes from desktop, tablet, or mobile landscape breakpoints
  3. Styles set on 1920px override styles inherited from desktop, 1280px, and 1440px 
  4. Only changes in the Styles panel cascade up or down. Any changes on the canvas or in the element settings panel affect all breakpoints (an exception is editing grid on canvas: which opens a popover in the Styles panel where you can directly manipulate on the canvas and changes cascades up and down as necessary)
  5. Deleting or reordering elements affects these elements on all breakpoints. You can hide elements on devices by setting its display to "none" in the Style panel
Smaller breakpoint 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 all breakpoints unless you override styles on another breakpoint.

Let's say you make the width 100% on mobile landscape. This will also change the width to 100% on mobile portrait, but the div block will still have 400px width on desktop, tablet, and all larger breakpoints. 

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

Breakpoints allow you to set specific styles for different screens. This allows you to customize the design for each screen, without breaking it on others. 

Style changes cascade both up and down (bidirectional cascade). They cascade up starting from 992px (desktop) and down from desktop to mobile. This means that styles applied on desktop, 1280px, 1440px, and 1920px cascade up to larger devices and styles you set on the desktop breakpoint cascade down and apply to the tablet and both mobile device sizes. 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 specific breakpoints, you may be tempted to move elements around, change their settings, or even delete them. Keep the cascade effect in mind and be sure to check the breakpoints affected by these changes, not just the breakpoint you’re on.

Element Settings

Only changes made in the Style panel will cascade up to larger breakpoints and down to smaller breakpoints. Any changes in the Setting panel, or in any settings modal, will impact the element on all breakpoints, regardless of what breakpoint you’re currently editing.

Content

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 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. 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.

Clearing styles

You can clear a set style value anytime by clicking the blue or pink indicator (text or icon label next to the style) and choose Remove this style. You can also hold option/alt on the keyboard and click the indicator to quickly remove it.

If we have a style on Tablet breakpoint that is cascading down to Mobile breakpoints, clearing that style on Tablet will also make the Mobile breakpoints inherit the style from desktop. 

Testing responsiveness and fluidity

In responsive design, elements on the page respond based on the width of a device, or in the case of a desktop computer, the width of the browser's viewport. You can test how your design will respond by clicking through each breakpoint at the top of the Designer.

To see how fluid a layout is on widths _between_ each breakpoint, hover over the edge of the canvas until the edges turn blue, then click and drag to resize.


As you resize the canvas, common device widths will display at the bottom of the viewport.


Browser support

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

Was this helpful?
OR

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