What are breakpoints in Webflow?

Breakpoints are predefined screen widths that determine how your website layout responds to different device sizes. In Webflow, they function as layers where you can override styles for smaller screens without affecting the desktop design.

The four default breakpoints

Webflow provides four breakpoints, each targeting a range of device widths:

• Desktop (base): 992px and above. This is where you design first. All styles set here cascade down to smaller breakpoints unless overridden.

• Tablet: 768px to 991px. Override styles here for tablet-sized screens.

• Mobile landscape: 480px to 767px. Targets phones held horizontally.

• Mobile portrait: 479px and below. The smallest breakpoint, targeting phones held vertically.

The desktop breakpoint is the foundation. Every element's base styles are defined here, and the three smaller breakpoints are override layers on top of it.

How the cascade works

Styles flow downward — from desktop to tablet to mobile landscape to mobile portrait. If you set a font size of 24px at desktop, it applies to all four breakpoints by default. If you then change it to 18px at the tablet breakpoint, tablets and everything smaller shows 18px, while desktop stays at 24px.

You cannot style a larger breakpoint from a smaller one. Changes made on mobile never affect desktop. This is a one-way cascade, and it's why Webflow recommends designing desktop-first.

The base breakpoint concept

Desktop is the "base" because it's the only breakpoint where you establish initial values. Every other breakpoint only stores differences from the level above it. This keeps your stylesheet clean — you only override what needs to change.

When you see a style value in the Style panel highlighted in orange, it means the value is inherited from a larger breakpoint. Blue means it was set at the current breakpoint. This visual cue helps you understand what's overriding what.

Custom breakpoints

Webflow does not support adding custom breakpoints beyond the four defaults. If you need styles targeting a specific width that falls between two breakpoints, you can write custom CSS media queries in Project Settings under Custom Code. Most projects don't need this — the four defaults cover the vast majority of devices.

Practical tips

• Always start at desktop. Build your full layout at the base breakpoint before touching smaller ones.

• Work down, never up. Style desktop, then tablet, then mobile. Skipping to mobile first creates gaps in the cascade.

• Check all breakpoints after changes. A margin change at desktop can push things around at every smaller breakpoint.

• Use the preview bar. The breakpoint icons at the top of the Designer show which level you're editing. The currently active one is highlighted.