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.
Hi does this cover ipad pro? i have a 3 column layout and it looks horrible on the ipad pro.
Hi heloish, this only covers Divi's own breakpoints. If you want custom styling for the ipad pro, this article looks like the right way to go:
https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106
It gives an example using SCSS instead of CSS, but basically it's suggesting using the following media queries:
@media only screen and (min-device-width : 1024px) and (max-device-width : 1024px) and (min-device-height : 1366px) and (max-device-height : 1366px) and (min-width: 1024px) and (max-width: 1024px) { /* ipad pro portrait styles */ } @media only screen and (min-device-width : 1024px) and (max-device-width : 1024px) and (min-device-height : 1366px) and (max-device-height : 1366px) and (min-width: 1366px) and (max-width: 1366px) { /* ipad pro landscape styles */ }They work by targeting the exact dimensions of the ipad pro and nothing else, so they won't interfere with the look of your regular site (except in the presumably very unlikely case that a user sets their regular desktop browser to the same exact dimensions).
Thanks a bunch! This was really helpful for my morning!
Logan, do I paste these values into the main element of the CSS field and do I copy and apply ALL the above-listed values into the main element field?
Hi Oliver, you don't put this CSS in the Custom CSS tab of individual modules, as it won't work there. The reason is that the fields in the Custom CSS tab (such as the main element field) only accept CSS properties, not full CSS such as the above.
Instead, these CSS media queries should be used somewhere that accepts full CSS, such as the Custom CSS box in the Divi Theme Options, or the style.css file of a child theme. This post explains in more detail:
https://divibooster.com/adding-css-to-the-divi-theme/
You can use add all of the @media blocks, or just the ones you need. Note that they won't do anything until you add some CSS code into the blocks – the @media blocks given by Logan just dictate the screen widths at which any CSS you add between the "{" and "}" will be applied. Hope that makes sense!
I am still very "green" in terms of DIVI and web development, so CSS is tricky for me. Will try your recommendations. Thanks Logan.
Thanks, very useful!
Thank you so much you are the best!!!!
updated for 2.7.4
/* Responsive Styles Large Desktop And Above */
@media all and (min-width: 1405px) {
}
/* Responsive Styles Smartphone Portrait */
@media all and (max-width: 479px) {
}
/* Responsive Styles Smartphone Only */
@media all and (max-width: 767px) {
}
/* Responsive Styles Tablet Only */
@media all and (min-width: 768px) and (max-width: 980px) {
}
/* Responsive Styles Tablet And Below */
@media all and (max-width: 980px) {
}
/* Responsive Styles 981px – 1100px */
@media all and (min-width: 981px) and (max-width: 1100px) {
}
/* Responsive Styles Desktop Only */
@media all and (min-width: 981px) {
}
/* Responsive Styles Standard Desktop Only */
@media all and (min-width: 981px) and (max-width: 1405px) {
}
Thanks for sharing that, Logan – much appreciated!
Thank you for the update!
Logan Ramirez Thank you Bro.
You've saved my time
Do we still have to put css under each one like I've done below or just copy and paste what you have?
/* Responsive Styles Standard Desktop Only */
@media all and (min-width: 981px) and (max-width: 1405px) {
#top-menu-nav { display:none; }
}
@media all and (min-width: 981px) and (max-width: 1405px)
#et_mobile_nav_menu { display:block }
}
Hi leisa, you will still need to put CSS under each one as you've done. The media queries given by Logan and myself are basically empty containers for putting CSS in – they determine when that CSS will be used (i.e. at what screen widths), but they won't have any visible effect until you add your own CSS.
Thank you, just what I needed!
Extremely helpful! Thanks!
Thank you so much for this! Saved me a ton of time :)
Yeah it is. Thanks Dan!
This is fantastic! Very helpful!