Responsive design is what helps your website content reflow and reposition on all devices — desktop, tablet, mobile landscape, mobile portrait, and the Game Boy Color. Responsiveness is arguably one of the most critical parts of website design and, in this lesson, we’ll fine-tune our site design to reflow perfectly for devices of all sizes.
00:00 — Introduction 00:20 — Desktop 01:39 — Tablet 05:46 — Mobile landscape 08:45 — Mobile portrait 12:59 — Test through all breakpoints 13:16 — Recap 13:28 — CTA: Upload a video of your responsive site using the #webflow101 on Twitter
This is part of the Freelancer's Journey site build series. It covers making the project site responsive across breakpoints — adjusting layouts, type scales, and spacing for tablet and mobile sizes.
The key workflow is switching between breakpoints in the Webflow Designer and overriding styles at smaller sizes. Webflow's breakpoint system cascades from larger to smaller by default, so styles set on desktop apply at all breakpoints unless overridden at a smaller size.