Divi Media Queries

Posted by George Nicolaou

On 8 May, 2018

Divi Media Queries

by | May 8, 2018 | Divi Theme Code Snippets | 0 comments

Just so that I never lose these

The general ranges of width for each device are as follows:

Large Desktop: 1405px and above
Standard Desktop: between 1100px and 1405px
Laptops and Large Tablets: between 980px and 1100px
Tablets: between 768px and 980px
Smartphones and small Tablets: between 320px and 768px;
Smartphones: between 320px and 480px;

Here is a list of the main media queries used in the Divi Theme. You can use this as a helpful template for your custom CSS.

Kudos to the original blog post by Elegant Themes https://www.elegantthemes.com/blog/divi-resources/how-to-identify-divis-responsive-breakpoints-and-fine-tune-your-designs-with-media-queries

All the css code is shown below

/*** 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) {
 
}

Let’s connect

Get in Touch with me easily using the methods below

©Copyright  George Nicoalou 2023 |  Disclaimer  |  Site Map

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This
Divi Theme Code SnippetsDivi Media Queries