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
