Skip to content
Chapter 03 of 05 · 2 lessons · ~19 min

Responsive Design and Components

Make every page work on all screen sizes and turn repeated parts into reusable components.

YOUR PROGRESS0%
/ Lessons in this chapter
07
Responsive Design and Breakpoints in Webflow How Webflow's breakpoints cascade and how to adapt layouts, text and navigation for every screen size. Coming soon
08
Webflow Components Explained How to build reusable components with properties so you edit once and update everywhere. Coming soon

Chapter practice task

Task: Make your page responsive and turn the navbar, footer and card into components

  1. Check every section at tablet, landscape phone and portrait phone breakpoints and fix layouts.
  2. Adjust typography and spacing for smaller screens.
  3. Turn the navbar and footer into components and use them on every page.
  4. Create a card component with properties for image, title, text and link.

By the end of this chapter

  • Your site looks right from large desktops to small phones
  • You understand how styles cascade between breakpoints
  • Repeated parts are components you edit in one place

Quick answers for this chapter

Which breakpoint do I design first?

The base (desktop) breakpoint. Styles flow down to smaller breakpoints, and up to larger ones if you add them.

Can I hide elements on mobile?

Yes, set display to none at that breakpoint. Hide decorations, not important content.

What happened to Symbols?

They’re now called components, with properties for content that changes per instance.