Intro to responsive design
When someone visits your site on a phone, tablet, or large display, the layout should adjust automatically — no zooming or separate versions required. That’s the goal of responsive design, and in this video we’ll introduce you to how it works in Webflow. You’ll learn what breakpoints are, how to style on breakpoints, and how styles cascade between them. We’ll also explain the difference between style changes and structural changes.
Video transcript
Responsive design is about making sure your website looks and works great on every device — from a wide desktop screen to a small phone. In this video, we'll give you a quick overview of what responsive design is and how to think about it as you build in Webflow.
Every site you build in Webflow is responsive by default — meaning Webflow gives you the tools to adapt your layout at different screen sizes. You do this using breakpoints, which are specific screen width thresholds where your design can change.
Webflow includes breakpoints for desktop, tablet, mobile landscape, and mobile portrait. You design at each breakpoint to control how your layout adjusts. Wider screens might show a multi-column grid; smaller screens might stack everything into a single column.
The key concept to understand is how styles cascade. When you set a style on the desktop breakpoint, it applies to all breakpoints below it by default. When you override a style on a smaller breakpoint, that change only affects that size and smaller — it never flows back up to larger breakpoints. This means you typically start designing on desktop and work your way down.
Responsive design also means thinking about things like font sizes, spacing, images, and touch targets. Elements that work well with a mouse on desktop might need to be larger or rearranged for touch on mobile.
We'll go deeper into breakpoints and responsive techniques in other lessons. But the core idea is simple: one design that adapts gracefully to every screen size, using Webflow's breakpoint system to control how it changes.
