Breakpoints

Webflow offers 7 breakpoints for design.

From largest to smallest, they are;

• 1920px >= 1920px
• 1440px >= 1440px
• 1280px >= 1280px
• Desktop (base) from 992px to 1279px
• Tablet <= 991px
• Mobile landscape <= 727px
• Mobile portrait <= 478px

By default, the largest 3 breakpoints only exist if you add them, or if you are using a template that has added them.

Remember also how breakpoints work-

Desktop (base): styles apply to all devices unless overridden at other device breakpoints

Which is essential for understanding layout and styling techniques.

https://university.webflow.com/lesson/intro-to-breakpoints

How Breakpoints Work

Breakpoints work by defining media selector in Webflow's generated CSS files, so that different styles will only apply at specific screen widths.

Limitations

• Unfortunately there is no way to change or redefine these to account for e.g. iPad screen sizes or other devices.
• Likewise, there is no way to deliver specific CSS against e.g. specific device types or orientations.

Advanced Programming

Demo - https://webflow-breakpoint.webflow.io/

Cloneable - https://webflow.com/made-in-webflow/website/webflow-breakpoint

Custom CSS with Webflow Breakpoints

It is possible to write breakpoint-specific custom CSS using the same approach that Webflow uses.

Here we start with the default base styles, which would appear at the desktop breakpoint, and then we progressively add media queries to override those styles at specific breakpoints.

In the code, you can see all of Webflow's breakpoints progressively applied.

Executing Javascript on Breakpoints

In some special cases, you may want to execute javascript to perform actions or manipulate the page- but only on certain breakpoints.

Here's the basic code you need to make that happen;

‍

https://test-cms-filter-cms-load.webflow.io/responsive-test

https://codepen.io/memetican/pen/QWJQeKe/bea1116878a9bb9f41b1a7147e404eb5?editors=1010

Removing Breakpoints

There is no way in the designer to remove breakpoints however Finsweet's chrome extension includes a tool that enables this.

Notes

https://codepen.io/memetican/pen/QWJmWLQ/4e6f08d1566ed34906043ce026794ce5

‍