14. February 2023

Divi Breakpoints – Desktop, Tablet, Mobile

If you design your own section for example with display: flex, it is important to know at which px number the Divi breakpoints are. For example, if you design your own Divi blog post layout.

What are the Divi Breakpoints?

The Divi Breakpoints are the pixel widths at which the layout switches from desktop to tablet or from tablet to mobile.

For example, on desktop you have 3 columns and on tablet you have only 1 column, but 3 rows. The pixel width at which this switches is the breakpoint.

For the CSS geeks it is called CSS Media Query Breakpoints.

Divi has its own CSS breakpoints.

The 3 Divi breakpoints are:

  • Desktop: Screen width of 981 px and above.
  • Tablet between 980 and 768 px
  • Mobile: 767 px and below

What are the Divi CSS Media Query Breakpoints?

The Divi Media CSS Media Query Breakpoints are the same as the Divi Breakpoints.

Only you can add your own styling with the CSS.

/* Desktop */
@media all and (min-width: 981px) {
  /* Your CSS */
}
/* Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
  /* Your CSS */
}
/* Mobile */
@media all and (max-width: 767px) {
  /* Your CSS */
}

How do I customize the Divi settings?

If you want to customize the Divi settings for mobile or tablet, you can do that for each property by clicking on the mobile icon.

divi breakpoints

That’s all.. now you know how to make Divi fully responsive.

Disclosure: Some of my posts contain ‘affiliate links.’ This means if you click on the link and purchase the item, I will receive an affiliate commission at no extra cost to you.

Subscribe
Notify of
guest
0 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments

Pin It on Pinterest