The Ultimate Divi Bundle - 5 Divi plugins. 1 great price.

The Divi Theme uses a responsive design, meaning it adjusts its layout to look good on any size of screen. This is achieved using CSS styles targeted at particular screen sizes using a technique called “media queries”.

If we’re looking to make changes to Divi using our own CSS, it can be useful to know the exact media queries Divi uses so that our styles are applied to the correct Divi layout. Here are the media queries Divi uses.

/* Large screens (1405px upwards) */
@media only screen and ( min-width: 1405px ) { 
    /* your css goes here */
}

/* Laptops and desktops (1100-1405px) */
@media only screen and ( min-width: 1100px ) and ( max-width: 1405px) { 
    /* your css goes here */
}

/* Tablets in landscape mode (981-1100px) */
@media only screen and ( min-width: 981px ) and ( max-width: 1100px ) { 
    /* your css goes here */
}

/* Tablets in portrait mode (768-980px) */
@media only screen and ( min-width: 768px ) and ( max-width: 980px ) {
    /* your css goes here */
}

/* Smartphones in landscape mode (480-768px) */
@media only screen and ( min-width: 480px ) and ( max-width: 767px ) {
    /* your css goes here */
}

/* Smartphones in portrait mode (0-479px) */
@media only screen and ( max-width: 479px ) {
    /* your css goes here */
}

I’ve added comments giving an indication of the type of devices (smartphones, laptops, etc) that will show each layout size, but note that this is a rough guide only – there is some overlap in which device types will show which screen resolution.