Stage 2 · Lesson 4 of 7
Responsive design with breakpoints
A is a screen width where the layout can change. In Webflow, styles flow down from the base breakpoint (desktop) to tablet and phone. They also flow up to larger screens, if you add those breakpoints.
A style set on desktop applies to every smaller size until you change it on a smaller breakpoint. An indicator in the shows where each value was set. Build and style the base breakpoint first.
Then adjust only what changes on smaller screens, such as stacking columns or reducing font sizes. Test each breakpoint in the Designer and on a real phone before any client review.
Common trapfixing a phone layout while the desktop breakpoint is selected, which changes every screen size and creates a new bug for each one you fix.
A question to check yourself, an AI practice session and 1 cheat sheet entry come with the full roadmap. Unlock
Resources for this stage
Start with
- CourseFreeWebflow University
Webflow · Beginner
Free official video courses; start with Webflow 101, then the CMS and layout lessons