It is no secret that the talented devs over at Elegant Themes have put a lot of thought and effort into making Divi the premier tool for creating responsive websites that look fantastic across all devices. You can easily with a few clicks of mouse apply settings and styles to specific screen sizes, you can even enable or disable entire sections, rows, or modules. This is all super handy, but sometimes it happens that you bump into situations where Adding Custom Breakpoints to Divi Modules will help you cater to additional devices or target some niche scenarios.

Unfortunately, Divi does not natively allow you to target a wider or more specific set of screen sizes, so it is up to you to get your hands dirty and add some custom code to be able to make the changes you want. Now we realize that many of the folks out there use Divi to avoid having to write code but don’t stress, we are going to show you how to easily add your CSS to specific screen sizes by Adding Custom Breakpoints to your Divi Modules.

Video Tutorial

What are Divi Breakpoints?

Divi or CSS Breakpoints allow you to define some rules that control how your site, or elements on your site, are displayed on different screen sizes. With smartphones and tablets being in the hands of more people than ever, the need to be able to target all these different screen sizes is larger than ever.

Divi is great, but it is not realistic to have Divi cater to all these screen sizes out of the box. That said, Divi has crafted 3 breakpoints that would target some of the most popular screen sizes.

Changing Settings based on the Divi Breakpoints

Now that we know what the Divi Breakpoints are, we can use the native Divi Builder Tools to make our site look different based on what device our visitors are using to browse it.

To do this, all we need to do is hover any setting of a module, row, or section, and then click on the icon for the device we want to manipulate the settings for.

Adding Custom Breakpoints to Divi Modules

So as we discussed, these built-in Divi features are super easy to use, but there might be times you need a little more flexibility which means that we will need to add a little bit of custom code to make things happen.

What we need to do is tell Divi that when a screen of a certain size is browsing the page, that a certain set of values should be applied to the target module. Let’s do a quick example that will display some text based on the size of the screen the page is being shown on.

Step 1) Add a Unique Class to the Divi Module

Browse to the page where you would like to add the custom breakpoint and hit Edit.

Now add a Text Module and type “This is a ” into the content area.

With that setup, click on the Advanced Tab of the Text Module and add a unique class, we will use de-breakpoint.

Save the Module.

Step 2) Add a Code Module

Click the grey “+” and add a Code Module anywhere on the page.

Add an opening and closing <style> </style> tags.

Copy and paste the code below between the <style> </style> tags.

Step 3) Modify the CSS Code

For each instance of “YOUR CSS HERE”, delete it and we will use that .de-breakpoint class we created earlier to manipulate the text module.

Copy and paste the code below in the place where you just deleted the text.

Now for each breakpoint, replace the text in the Content property with the type of device you are targeting for example “Extra Large Desktop” or “Medium Tablet“.

Save the Module.

Update the Page.

Step 4) Test it Out!

Using your favorite desktop browser, open the saved page.

Now when you resize the window, you will see that it updates the text with the active Custom Divi Breakpoint for that module.

Quick Review

This was a pretty basic example to demonstrate the different Custom Breakpoints we added to our Divi Text Module, but there is a ton of other things you can do. For example, you can add more or fewer breakpoints, that have breaks at different pixel sizes, all you need to do is modify those values in the code we supplied.

You can also drop the class we used and target certain elements in Divi site-wide by using the appropriate class by adding your breakpoint CSS to Divi > Theme Options > Custom CSS.

For example, maybe you have a Full-width Menu Module on a page that you want to behave differently outside of the default Divi breakpoints. All you would need to do is target the module with the .et_pb_fullwidth_menu and .fullwidth-menu-nav CSS classes underneath your target breakpoint.

Hooray for Breakpoints and Responsive Design using Divi!

Conclusion

Adding Custom Breakpoint to Divi Modules was the only kind of scary, right? There are so many different ways you can utilize this skill to further fine-tune your site to meet your goals, we don’t always have to wait for the Elegant Theme Team to add a feature like this.

Definitely show us in the comment section what you guys achieve using this new skill, maybe you’ll even teach us a thing or two 😉