Divi breakpoints & media queries guide

Divi is a responsive theme that uses breakpoints and media queries to optimize your website to display on various screen sizes.

Your website will automatically display differently depending on which screen size the website is being viewed on.

For example, you can see in the image below how a 4-column row on a desktop will turn into two 2-column rows on a tablet and four 1-column rows on a mobile.

This is one of the built-in responsive features of Divi.

What are Divi breakpoints?

Divi breakpoints or CSS media query breakpoints are the pixel widths at which the website content changes for certain screen sizes.

By default, Divi comes with 3 built-in breakpoints that allow you to display content differently when viewed via a desktop, tablet, and mobile screen size.

The 3 Divi breakpoints are:

• For Desktop screen sizes of 981 pixels and above
• For Tablet screen sizes between 980 pixels and 768 pixels
• For Mobile screen sizes 767 pixels and below

Adjusting settings for different breakpoints

The built-in Divi breakpoints are easily utilized using the DIvi Builder as each setting for Divi sections, rows, columns, and modules can be changed individually to apply to desktops, tablets, and/or mobiles.

To make a setting apply to a particular Divi breakpoint or screen size you will need to;

1. Hover over a setting in your section, row, column, or module and click on the small phone icon second from the left
2. This will open up the responsive settings tab, displaying icons for desktop, tablet, and mobile. Select the desired screen size to target by clicking on its icon
3. With the desired screen selected you can then make changes to the setting and save
4. Your new settings will now only be applied when viewed on the screen size you selected

Top tip – You need to click the mobile icon for each setting individually. In the example above we are editing the Blurb module design settings. The responsive controls are open for the title text size setting where I have changed the title text size for mobiles to 29px. The responsive setting for mobile is only open for the title text size and not any other setting. Many people may then click into the title letter-spacing (or any other setting) and adjust its setting thinking it will also be targeting the mobile view, but it would be targeting all breakpoints and screen sizes. You must hover over each setting title and click the mobile icon.

What are Divi media queries?

Media queries are CSS rules that are applied to different media types/devices as specific by breakpoints.

Media queries are integrated as part of the Divi Builder so by using the built-in settings for desktop, tablet, and mobile you are using breakpoints and media queries.

Adding your own breakpoints and media queries to Divi

For the majority of DIvi users, the built-in responsive design tools will be more than enough to ensure your website displays satisfactorily on the majority of devices.

But, if you need to have more control to ensure your site is pixel perfect for a specific device then you can add your own breakpoints and media queries via your CSS stylesheet.

To add your own media queries to Divi you will need to add some custom CSS to your child themes stylesheet or the custom CSS box in your Theme Options

Whilst you can target any screen size, resolution, or orientation using the @media rule, the most common media queries would include;

/*** Responsive Styles Large Desktop And Above ***/
@media all and (min-width: 1405px) {
<strong>ADD YOUR CSS RULES HERE</strong>
}
/*** Responsive Styles Standard Desktop Only ***/
@media all and (min-width: 1100px) and (max-width: 1405px) {
<strong>ADD YOUR CSS RULES HERE</strong>
}
/*** Responsive Styles Tablet And Below ***/
@media all and (max-width: 980px) {
<strong>ADD YOUR CSS RULES HERE</strong>
}
/*** Responsive Styles Tablet Only ***/
@media all and (min-width: 768px) and (max-width: 980px) {
<strong>ADD YOUR CSS RULES HERE</strong>
}
/*** Responsive Styles Smartphone Only ***/
@media all and (max-width: 767px) {
<strong>ADD YOUR CSS RULES HERE</strong>
}
/*** Responsive Styles Smartphone Portrait ***/
@media all and (max-width: 479px) {
<strong>ADD YOUR CSS RULES HERE</strong>
}

So, for example, if you wanted to change all h1 text on large desktops to be 40px you could add the following code into your CSS stylesheet;

/*** Responsive Styles Large Desktop And Above ***/
@media all and (min-width: 1405px) {
h1 {
font-size: 40px;
}
}

Final thoughts

Most of the websites I build are not overly optimized for various screen sizes beyond what Divi does out-of-the-box. I occasionally use the built-in responsive design controls within the Divi modules but am yet to find the need to create my own media queries and breakpoints. Most of the target audiences for my websites are using desktops so tablets and mobiles are not overly important to me or my users. Obviously, each website is different and having the built-in options to restyle your site with built-in controls is hugely useful.

Do you use the built-in options to change styles for desktops, tablets, and mobiles? Have you ever created your own media queries?