jasonsyourhuckleberry
9/9/2018 - 8:24 PM

Divi Media Queries/Break Points

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.

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

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

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

/* Retina media queries for tablets  */
@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}