Divi Breakpoints and Media Queries

by Mark | Aug 8, 2019 | Divi tutorials | 0 comments

1 Shares

In this tutorial, I will be explaining what the breakpoints are in Divi and the corresponding media queries. With media queries, you can target certain devices or screen sizes with CSS. So, the CSS will only be applied to those screen sizes.

Divi breakpoints

The breakpoint means that the layout of your website changes at certain screen size. The Divi breakpoints are:

0px – 479px for mobile
480 – 980px for tablets
981px and above for desktops

Divi media queries

In the latest version of Divi, we can adjust elements for mobile, tablet and desktops. For example, if we have an h1 title with a font size of 80px for desktop then we can make it smaller for mobile and tablet so it will fit properly. To do this you need to activate the mobile options by hovering over the title and click on the phone icon.

This way you can adjust almost every element on your website for mobile, tablet and desktops.

But some times there is an element that you can adjust this way or for screen sizes above 981px. In those cases, we can use media queries.

I use media queries the most for screen sizes above 981px, for example, laptop screen sizes.

For example, we have the following problem on our site:

At 981px the 3 boxes are a bit small and the content is not aligned properly. We can fix this with a media query and some CSS.

I will be using the following media query with CSS to increase the width of the row. By default, the row width is 80%, I will increase this to 95% for screen sizes 981px till 1350px. You will also need to apply the CSS class to your row.

@media (min-width: 981px) and (max-width: 1350px) {
.divi_column_row {
    width: 95% !important;
}}

And it will now look like this:

Here are some more examples of media queries that you can use.

For screen sizes not larger then 479px. You want to use this for mobile devices.

@media only screen and ( max-width: 479px ) {
/* CSS goes here */
}

For screen sizes between 480px and 980px. You want to use this for tablet devices.

@media only screen and ( min-width: 480px ) and ( max-width: 980px ) {
/* CSS goes here */
}

For screen sizes larger then 981px. You want to use this for desktops.

@media only screen and ( min-width: 981px ) {
/* CSS goes here */
}

All screen sizes below 980px.

@media only screen and ( max-width: 980px ) {
/* CSS goes here */
}

For screen sizes between 981px and 1350px. Great to target laptops.

@media (min-width: 981px) and (max-width: 1350px) {
/* CSS goes here */
}

You can change the screen size value for your own needs, but this are properly the ones you want to use the most in consideration with the Divi breakpoints.

Join today