How to Identify Divi’s Responsive Breakpoints and Fine Tune Your Designs with Media Queries

Responsive web design is a necessity these days. There are over 8 billion mobile devices active in the world today. And, with the growing rate of smartphones and tablets at an all time high, it’s possible some visitors may never see your site on a desktop, at least not at first. That’s why making a first impression on mobile is crucial and demands our attention.

Thankfully, the Divi Theme is responsive and uses a combination of fluid grid layouts and media queries that work well on all devices. Since the release of Divi 2.6, Divi has Responsive Editing Controls within the Theme Customizer and Divi Builder that allow you to easily view and adjust certain style elements based on desktops, tablets, and smartphones.

Although Divi does most of the heavy lifting for you, there may come a time when tweaks need to be made to your responsive design for certain screen sizes. That is why it is important to familiarize yourself with Divi’s responsive breakpoints – the points where the layout of your site changes to fit a certain screen size.

Today I’m going help you locate Divi’s responsive breakpoints and show you how to use media queries in your CSS to fine tune your design. I’ll even give you a list of Divi’s media queries you can use as a reference for future changes. But first, let’s take a look at Divi’s Responsive Editing Controls.

Using the Divi Builder Responsive Editing Controls

If you haven’t taken advantage of Divi’s Responsive Editing Controls, this is a great place to start. Divi has made it easy for you to view how your site renders on the three main devices (desktop, tablet, and phone).

You can view them from within the Theme Customizer which is helpful when making design changes to the theme. Simply click on the device icons at the bottom of the Theme Customizer sidebar.

You can also view how each module renders on each device from within the Divi builder. When viewing the settings of any module, simply click the eye icon and click the different devices to view the content on each screen size.

You can even tweak certain design settings for each of these devices. For example, let’s say you want to change how a blurb module heading font size is displayed on each device. To do this you would open Blurb Module Settings and, under the Advanced Design Settings, change the Header Font Size. You will notice a small phone icon that pops up. Click on the phone icon to adjust the same header font size for each device.

Pretty simply right? This is a convenient option for basic responsive design tweaks. But sometimes you need more advanced edits to Divi’s breakpoints. For that, you should look at Divi’s media queries for a deeper understanding.

Divi’s Built-In Media Queries

Media Queries are basically a way to compartmentalize CSS by media type. In this case the media type will be set to “all” (meaning suitable for all devices). The other media types are print, screen, and voice. In CSS, the media type is usually followed by a media feature which in this case will be the device width. After the media type and features are set, you can include a set of nested CSS within brackets that will only be applied for that Media Query.

Look at the following example media query:

@media all and (max-width: 980px) {
h1 {
font-size: 30px;
}
}

Notice “all” defines the media type and “(max-width: 980px)” is the media feature that specifies the width of the device to which the bracketed CSS should be applied. In this example, the h1 font size will be 30px only on a screen that is 980px or below.

The general ranges of width for each device are as follows:

Large Desktop: 1405px and above
Standard Desktop: between 1100px and 1405px
Laptops and Large Tablets: between 980px and 1100px
Tablets: between 768px and 980px
Smartphones and small Tablets: between 320px and 768px;
Smartphones: between 320px and 480px;

Here is a list of the main media queries used in the Divi Theme. You can use this as a helpful template for your custom CSS.

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

/*** Responsive Styles Standard Desktop Only ***/
@media all and (min-width: 1100px) and (max-width: 1405px) {

}

/*** Responsive Styles Tablet And Below ***/
@media all and (max-width: 980px) {

}

/*** Responsive Styles Tablet Only ***/
@media all and (min-width: 768px) and (max-width: 980px) {

}

/*** Responsive Styles Smartphone Only ***/
@media all and (max-width: 767px) {

}

/*** Responsive Styles Smartphone Portrait ***/
@media all and (max-width: 479px) {

}

Fine Tuning Your Designs with Media Queries

You can use Divi’s built-in media queries to add custom CSS targeted for each device. I suggest using the Theme Customizer for this. It allows you to add your Custom CSS to your theme and see the results for each device in real time all in one place.

From your WordPress Dashboard, go to Divi → Theme Customizer.

Then select Additional CSS at the bottom of the sidebar.

For this example, I have a mock page built with a header and four blurb modules with a button module under each.

Let’s say you want to increase the width of the buttons only on smartphones. To do that copy the following media query that targets smartphones:

@media all and (max-width: 480px) {

}

Then add the CSS you want for that new button style inside the brackets of my media query like this:

@media all and (max-width: 480px) {
.et_pb_module.et_pb_button {
display: block;
}
}

Then paste the media query inside the Additional CSS text box.

Now you can toggle between device views by clicking on the device icons at the bottom of the Theme Customizer sidebar to see the changes.

Notice the change of the button width on the smartphone device view.

Targeting more specific widths using browser developer tools.

For certain designs, Divi’s built in breakpoints aren’t specific enough. Sometimes you need to add your own custom breakpoints and Media Queries. For example, you may find that your header needs an adjustment right at the 1000px width instead of waiting for it to break at Divi’s 980px width. To make these kind of adjustments, you can use your browser’s developer tools to pinpoint those breakpoints.

If you are using Chrome, they have tool that will allow you to test responsive and device-specific viewports. To access the tool, right click on the screen and select inspect element from the drop down menu that appears. Click the small Device Toolbar icon.

Then use the menu at the top to change the device view or set a custom width.

You can even drag the size of the screen to pinpoint any problems you need to address along with the exact width you need to target.

Once you have pinpointed the breakpoint, create a media query for your custom CSS change. For example if you need to change your h1 font size to 30px between 780px and 1000px, you would create the following media query and add it to your custom CSS:

@media all and (min-width: 780px) and (max-width: 1000px) {
h1 {
font-size: 30px;
}
}

That’s it!

Final Thoughts

Most of what you need for a responsive website is already built in to Divi. Depending on your site design, however, you may need to add more custom CSS to Divi’s breakpoints using Divi’s built-in media queries. And if that’s not enough, you can always find the breakpoints you need using browser developer tools as well.

There are many tools out there. Firefox has a responsive design mode you can use. If you use Safari, they have a new Responsive Design Mode as well.

I look forward to hearing from you in the comments!