Divi Breakpoints and Media Queries
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.
@media only screen and ( max-width: 479px ) {
/* CSS goes here */
}@media only screen and ( min-width: 480px ) and ( max-width: 980px ) {
/* CSS goes here */
}@media only screen and ( min-width: 981px ) {
/* CSS goes here */
}@media only screen and ( max-width: 980px ) {
/* CSS goes here */
}@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
Free Membership
Sign up for a Free membership and get access to this and all other free Divi layout packs, cheat sheets, exclusive discounts and much more.
Join today
Free Membership
Free Divi layout packs
Checklists & Cheat sheets
Exclusive discounts
0 Comments