Module 5 - Lesson 4

Breakpoints and CSS Media Queries

In this lesson, I’ll explain how the mobile version of Divi is structured, what breakpoints are, and how Divi works with different media queries. We’ll look into the differences between “mobile first” and “desktop first” approach to responsive web design.

Video Chapters

00:00 Introduction

00:23 Mobile First vs Desktop First

01:11 CSS Breakpoints

01:45 Divi Breakpoints

02:30 Writing CSS "Mobile First"

03:18 Writing CSS "Desktop First" (for Divi)

04:07 Combining Media Queries

04:30 Media Queries in the Chrome Inspector

07:04 Locating the Media Queries in the CSS Code

Join the discussion

Share your thoughts about this lesson with fellow students!

Login to your Account

If you're a DSA Student, please log in to your account to access the course content.

Sorry, you don't have access to this content.

It looks like you're not enrolled in Divi Stylist Academy.