Make your site responsive

Login with your Webflow account to track your progress

Make your site responsive

Learn how to preview, adjust, and refine your layout so it looks great on every screen size.

Webflow has a new UI, so visuals may vary slightly, but the course content is still relevant.

A great website works everywhere — whether someone’s browsing on a large desktop or a small mobile phone. In this course, you’ll learn how to use breakpoints in Webflow to design layouts that adapt across screen sizes. You’ll explore how to preview your design at different widths, make thoughtful adjustments, and build flexibility into your layout from the start.

This course is designed for Webflow designers and builders — whether you’re creating your first site or refining an existing layout to work responsively.

By the end of this course, you’ll have the skills to:

Preview and test your layout across breakpoints
Adjust styles and layout for different screen sizes
Use layout tools, flexible units, and variable modes to reduce manual tweaks
Build responsive designs that look and feel great on any device

Table of contents

1

Getting started

Coming soon

1

Background & preview

Background & preview

Coming soon

2

Responsive design foundations

Coming soon

2

Intro to responsive design

Intro to responsive design

Coming soon

2

Review: Breakpoints in Webflow

Review: Breakpoints in Webflow

Coming soon

3

Responsive design in action

Coming soon

3

Design across breakpoints

Design across breakpoints

Coming soon

3

Making smart adjustments

Making smart adjustments

Coming soon

3

Responsive design best practices

Responsive design best practices

Coming soon

4

Wrap up

Coming soon

4

Additional resources

Additional resources

Coming soon

Progress

0%

Details

Beginner - Intermediate

22m

7

Lessons

Assets & links

Assessment

Test your knowledge

Continue learning

Getting started with Webflow

Get familiar with Webflow’s website experience platform.

Optimize, quality-check, & publish

Learn how to review, optimize, and confidently publish your site using Webflow’s built-in tools and best practices.

Accessibility on the web

Learn about accessibility on the web and how to create inclusive and accessible sites without writing code.

Welcome to Webflow

Discover what Webflow offers, how it works behind-the-scenes, and tips and tricks for starting your learning journey.

Welcome to Optimize

Learn how to use Webflow Optimize to improve your site's conversion rate using testing, personalization, and the power of AI.

21-day design portfolio course

Build and visually design a full portfolio website within the span of 21 days.

Interactions & animations course

Learn how to animate multiple elements managed on a single timeline — bring your designs to life with rich, sequenced interactions and animations.

Webflow Ecommerce

Learn how to build and design your Webflow Ecommerce store. Customize every detail and launch a fully functional online store — without writing code.

Design systems in Webflow

Learn how to create a design system in Webflow for consistent and scalable site building.

CSS layout & positioning

Dig into the world of HTML and CSS layouts — learn how they work together and get an overview of display properties like inline block and flexbox.

Web animations with After Effects & Lottie

Create animations in Adobe After Effects — the industry standard for motion graphics. Embed and animate them in your Webflow site.

Design & manage CMS content in Webflow

Learn how to create, manage, and style dynamic content and collections on your site using Webflow’s CMS.

Client's guide to the Editor

This is the Client's guide to the Webflow Editor. Share these lessons to get your clients up and running.

Figma to Webflow

Learn the entire design process from idea to final output as we take you through Figma, Cinema 4D and Octane, and Webflow.

Full site build

Learn how to design and develop a CMS-driven website built around the needs of your client and their audience — and execute a successful launch.

Freelance web design boot camp

The Freelancer’s Journey is a free, comprehensive course to help you build a successful, fulfilling freelance career in web design.

Moving your business online

A free course on how to take your business online. Serve more clients and generate more revenue in this new environment.

Lay out & style your site

Learn how to lay out and visually style pages to fit your look and brand.

Getting started with Webflow Enterprise

Get familiar with Webflow’s website experience platform and Enterprise features.

Ultimate web design course

From the fundamentals to advanced topics — learn how to build sites in Webflow and become the designer you always wanted to be.

Build & structure your site

Learn how to add different types of HTML elements to structure pages on your site.

Webflow 101

Introducing Webflow 101, the ultimate course to learn the fundamentals of web design and development.

Localize your site in Webflow

Learn how to localize a site for different languages and regions. Translate text, customize and manage content, and optimize SEO settings, so your site reaches a wider audience.