Divi Default Breakpoints and Media Queries

Divi breakpoints

The breakpoint means that the layout of your website changes at a certain screen size. Divi has three default breakpoints for mobile, tablets and desktop versions of your website.

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

CSS media queries for Divi Breakpoints

For screen sizes not larger than 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 1367px. Great to target laptops.

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

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

About The Author

1 thought on “Divi Default Breakpoints and Media Queries”

  1. Can you tell me what the css would be for overriding the 980? 980 is just to small for a two column layout and so I would like the breakpoint from desktop to tablet to be more like 1080px or so. Than you! (The site I am sending the link for is not DIVI but I have some I am working on for customers)

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top