Design across breakpoints

Responsive design means building websites that work well on any screen size — from a large desktop monitor down to a small phone. In Webflow, you design responsively using breakpoints, which are the different screen sizes you target as you build.

By default, Webflow has a desktop breakpoint that you start from. From there, you can switch to tablet, mobile landscape, and mobile portrait breakpoints to adjust your layout for smaller screens. There's also an option to add breakpoints for larger screens.

Here's the key rule in Webflow: styles cascade downward. When you set a style on the desktop breakpoint, it applies to all smaller breakpoints by default. But you can override any style at a smaller breakpoint, and that change will only affect that breakpoint and anything smaller. Changes made on a smaller breakpoint never affect larger ones.

So the typical workflow is: design your layout for desktop first, then switch to each smaller breakpoint and adjust what needs to change. Maybe the layout goes from three columns to one column on mobile, or font sizes get smaller, or spacing tightens up. You make those adjustments at each breakpoint.

To switch breakpoints, use the breakpoint controls at the top of the Designer. When you're on a breakpoint other than desktop, you'll see a colored indicator reminding you that changes here won't affect larger breakpoints.

Responsive design takes practice, but Webflow's visual breakpoint system makes it much easier than writing media queries by hand. Start with desktop, work your way down, and test at each size as you go.