Start Here
3 lessons

Module 5 - Lesson 5

Media Queries CSS Syntax

Lesson Overview

In this lesson, we’ll focus on the exact syntax for using Media Queries in CSS and I’ll explain how you can work with different screen sizes when writing your CSS code.

Video Chapters

00:00 Introduction

00:17 The at-rule

00:36 Media types

01:43 Media Features and Logical Operators

03:26 How browsers see the Media Query

04:40 Divi Theme Media Queries

06:18 The Order of CSS Code and Media Queries

08:16 Mind the Brackets

08:54 Copying CSS from the Chrome Inspector

10:09 Where to add media queries?

Divi Theme Media Queries

/*** Responsive Styles Large Desktop And Above ***/
@media all and (min-width: 1405px) {
  
}
 
/*** Responsive Styles Standard Desktop Only ***/
@media all and (min-width: 1100px) and (max-width: 1405px) {
 
}
 
/*** Responsive Styles Tablet And Below ***/
@media all and (max-width: 980px) {
 
}
 
/*** Responsive Styles Tablet Only ***/
@media all and (min-width: 768px) and (max-width: 980px) {
 
}
 
/*** Responsive Styles Smartphone Only ***/
@media all and (max-width: 767px) {
 
}
 
/*** Responsive Styles Smartphone Portrait ***/
@media all and (max-width: 479px) {
 
}