Light mode Switch to Dark mode High contrast

All courses

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.

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 2:00

Background & preview

Coming soon

2

Responsive design foundations

Coming soon

2

Intro to responsive design 3:34

Intro to responsive design

Coming soon

2

Review: Breakpoints in Webflow 2:00

Review: Breakpoints in Webflow

Coming soon

3

Responsive design in action

Coming soon

3

Design across breakpoints 8:12

Design across breakpoints

Coming soon

3

Making smart adjustments 2:00

Making smart adjustments

Coming soon

3

Responsive design best practices 2:00

Responsive design best practices

Coming soon

4

Wrap up

Coming soon

4

Additional resources 2:00

Additional resources

Coming soon

Progress

0%

Details

Beginner

22m

7

Lessons

Assets & links

Assessment

Test your knowledge

Enroll Now →

Continue Learning

<h3>Intro to Optimize</h3>Learn how to use Webflow Optimize to improve your site's conversion rate using testing, personalization, and AI Optimize.

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

<h3>Prepare to publish your site</h3>Learn how publishing works in Webflow, manage site changes with confidence, and prepare for launch.

<h3>Webflow SEO fundamentals</h3>Learn how to plan, build, and maintain a search-friendly Webflow site using best practices and built-in SEO tools.

<h3>Take your app live with Webflow Cloud</h3>Prepare and deploy an existing app, connect live data, and keep it running.

<h3>Collaborate with your team</h3>Learn how to set up roles, permissions, and workflows in Webflow so your entire team can work together safely, confidently, and efficiently.

{
  "@context": "https://schema.org",
  "@type": "Course",
  "name": "Make your site responsive",
  "description": "Learn how to preview, adjust, and refine your layout so it looks great on every screen size.",
  "url": "https://university.webflow.com/courses/make-your-site-responsive",
  "inLanguage": "en",
  "provider": {
    "@type": "Organization",
    "name": "Webflow University",
    "sameAs": "https://university.webflow.com"
  }
}