Webflow offers 7 breakpoints for design.
From largest to smallest, they are;
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
Breakpoints work by defining media selector in Webflow's generated CSS files, so that different styles will only apply at specific screen widths.
Demo - https://webflow-breakpoint.webflow.io/
Cloneable - https://webflow.com/made-in-webflow/website/webflow-breakpoint
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.
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
There is no way in the designer to remove breakpoints however Finsweet's chrome extension includes a tool that enables this.
https://codepen.io/memetican/pen/QWJmWLQ/4e6f08d1566ed34906043ce026794ce5
