EN IT
Home About Learn Blog

Make a Webflow Site Fully Responsive: Breakpoints

Beginner 25:48 webflowresponsivebreakpointsflexboxmobile

Make a Webflow site fully responsive across tablet, landscape, and portrait — mastering the cascade principle, breakpoints, mobile navigation, and a few essential Flexbox tricks.

Watch on YouTube

Key takeaways

  • Building fluid from the start (min(), clamp(), em) means most breakpoints need almost no work — responsiveness is a mindset, not a final cleanup pass.
  • Styles cascade down from desktop to smaller breakpoints (and up to larger ones); you override inherited values per breakpoint, and the orange label shows what's inherited.
  • The cascade applies to styling, not structure — to move an element on one breakpoint only, duplicate it and show/hide each copy with combo classes rather than dragging it.
  • Webflow's breakpoint ranges no longer match real devices, so preview at the smallest width of each range to surface issues instead of trusting the labels.
  • Small Flexbox moves carry the day: flex-wrap for overflowing logos, margin-top: auto to pin an element to the bottom of a card, and reversing direction to restack columns.

Video chapters

  1. 00:00 Intro
  2. 00:51 Polishing the desktop breakpoint
  3. 03:23 Breakpoints and the cascade principle
  4. 04:50 Tackling the tablet breakpoint
  5. 11:56 Dealing with the landscape breakpoint
  6. 18:13 Refining the portrait breakpoint
  7. 25:03 Publishing to Webflow's staging domain
  8. 25:27 What’s Next

By the end of this final lesson your landing page will be fully responsive — tablet, landscape, and portrait — and you’ll see the payoff of building fluid from day one. Because we leaned on min(), clamp(), and em from the start, most breakpoints need only small, surgical fixes.

That’s the big idea to take away: responsiveness is a mindset, not a phase. If you structure layouts well and use responsive units early, adapting to smaller screens becomes fast and almost boring — in the best way. The work that’s left is mostly navigation and a handful of Flexbox tricks.

We’ll also clear up two things people constantly get wrong: how the cascade actually flows, and why structural changes leak across every breakpoint (and what to do instead).

How it works

Webflow breakpoints follow a cascade. Styles applied on desktop flow down to tablet, then landscape, then portrait (and up to larger breakpoints if you enable them). At any smaller breakpoint you can override an inherited value, and the orange label reminds you when a value is coming from a higher breakpoint rather than set here. This is why a responsive-first, desktop-with-fluid-units approach pays off: there’s simply less to override.

The critical caveat: the cascade applies to styling, not structure. Change a color or a flex direction on tablet and it stays scoped to tablet-and-below. But move an element in the navigator and you’ve changed the HTML, which every breakpoint shares. So when you need an element in a different place on one breakpoint — say, the CTA button inside the mobile menu — you don’t drag it. You duplicate it and use combo classes to show one copy and hide the other per breakpoint.

A reality check on the breakpoints themselves: their ranges (tablet ~991–768px, landscape ~767–480px, portrait below that) stopped matching real devices long ago. Modern tablets often behave like desktop; phones in landscape often land in the tablet range. So preview at the smallest width of each range to surface problems, and don’t trust the device labels.

The rest is a toolkit of small Flexbox moves: flex-wrap (plus width: auto on the items) to tame the overflowing logo row; margin-top: auto on a flex child to pin the social links to the bottom of a team card; reversing a flex direction to restack the feature columns; and setting line-breaking: normal to stop a no-wrap dropdown heading from overflowing. None of them is fancy — that’s the point.

How to use it

  1. Polish desktop first. Swap remaining fixed values for responsive ones where it helps: change the hero heading’s bottom margin to 5em, set images to width: 100% for cross-browser consistency, and switch the logo-list gap to em. (Pixels aren’t evil — keep them where they make sense, like the navbar padding.)
  2. Learn the cascade, then work down. Start at tablet, always dragging the canvas handle to the smallest width of the range so issues show up early.
  3. Tablet. Move the navbar menu button to appear from “mobile landscape” (three links don’t need it yet); add side margins so the navbar doesn’t touch the edges; fix the overflowing logos with flex-wrap and width: auto.
  4. Landscape. The menu button is here to stay — drag it into the navbar content wrapper, then style the nav menu’s open state (background, border, top margin, padding). Stack the feature items vertically (flex direction), and drop the team grid from three columns to two.
  5. Portrait. Move the CTA button into the mobile menu the correct way: duplicate it, hide the original with a cc-desktop-menu combo class, and reveal the copy with a cc-mobile-menu combo class (overriding the inherited display: none back to visible on portrait). Drop the team grid to one column, fix a dropdown heading with line-breaking: normal, and add right padding so the arrow icon never overlaps the text.
  6. Publish. Click Publish → Publish to selected domains to push to your Webflow staging domain, where you can test everything before going to production on a custom domain.

And that’s the whole crash course. You started from a blank canvas and built a complete, responsive site — now go clone it, take it apart, and make it yours.

Resources

Frequently asked questions

How does the cascade principle work across breakpoints in Webflow?
Styles set on desktop cascade down to tablet, landscape, and portrait, and up to any larger breakpoints you enable. Each smaller breakpoint can override what it inherits, and the orange label tells you a value is coming from a higher breakpoint.
Why do structural changes affect every breakpoint in Webflow?
Because the cascade applies only to styling — moving or reordering elements changes the HTML itself, which is shared across all breakpoints. To place something differently on one breakpoint, duplicate it and show or hide each copy with combo classes.
Do Webflow breakpoints match real devices?
Not really anymore. Many modern tablets behave like the desktop breakpoint, while phones in landscape often fall inside Webflow's tablet range. Preview at the smallest width of each range rather than trusting the device labels.
How do I turn a multi-column layout into a single column on mobile?
On the smaller breakpoint, either change a grid's column count (down to one) or reverse a Flexbox container's direction to vertical. Because it's a style change, it only affects that breakpoint and the ones below it.

← Back to the course