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.