How To Add Custom CSS Media Queries To Divi For Making Your Site Responsive

This tutorial will show you how to add custom CSS media queries in Divi for making your website responsive on any different device sizes.

Categories: Divi CSS Divi Responsiveness Tutorials WordPress

Learn About Media Queries In Divi

At some point in your website design journey as you play around with CSS you will come across media queries. These are considered advanced CSS, so if you are unfamiliar with them or don’t know to use them, that’s okay. Chances are, you have seen media queries before and were intimidated by them. If so, you don’t have to be any longer. This post will show you what media queries are, how to write them, and how to use them in Divi.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

Subscribe On YouTube

What Are Media Queries?

A media query is an HTML/CSS functionality that allows the content of a web page to adapt to the type of media being rendered, such as a computer screen or that of a phone or tablet. Media queries are basically a way to compartmentalize CSS by media type to use it for specific things. In case, that specific thing is width.

In CSS, the media type is usually followed by a media feature which in this case will be the device width. Media features are optional in media queries. Basically, this would change the user experience depending on the behavior and features of the user and the output device. Some commonly used media features are mentioned below.

Orientation
Resolution
Aspect ratio
Width
Height

In this tutorial, we are focusing on width, the most common media query.

Viewport Width vs. Screen Resolution

Note that the width we are referring to is not the screen resolution of the device, but rather the width of the viewport. For example, the Pixel 4 smartphone has a resolution of 1080 x 2280, but the viewport is 411 x 869. If you were using our new Divi Responsive Helper plugin, you could set the preview size to 411px to test your responsive website design for Pixel 4 users.

Divi Responsive Helper Plugin for making Divi responsive on mobile by Pee-Aye Creative

Understanding CSS Breakpoints In Divi

What is a CSS breakpoint?

Another way we refer to media queries is with the term “breakpoint,” since breakpoints are defined by media queries. A media query tells the browser how to display the content if it matches certain criteria.

CSS breakpoints are defined points in the code of the website where the content changes or responds according to the device width. Having multiple breakpoints allows you to show the best possible layout to the user for different device sizes.

Default Breakpoints In Divi

By default, Divi comes with three main breakpoints which are hardcoded into the theme. These three built-in Divi breakpoints are represented by three different devices, a desktop, a laptop, and phone. We can imagine a very general device width of those in our minds, and that’s exactly how Divi was set up.

In Divi, the exact sizes for these breakpoints (which are determined by media queries built into Divi) are Desktop (above 981px), Tablet (980px – 768px), and Phone (767px and down).

As you probably know, if you hover over any setting in Divi you will see the phone icon which opens these responsive breakpoints as tabs.

When you are adjusting settings for each device, it helps to think of these tabs as three groups of settings: one group of settings for Desktop, another group of settings for Tablet, and another group of settings for Phone.

By using these three tabs, you can make any setting on your website responsive in the Visual Builder. What about those instances when these are not enough?

Using Custom CSS Media Queries In Divi

Start with the @media rule

Every media query starts with the @media rule which is used to apply the code snippet to a specific media type, which again in our case is the width of the device viewport.

Assign the device width

Now comes the part where we get to choose that width we keep talking about. We are going to be using two terms a lot, min-width and max-width. These are declaring that the CSS should apply to those specific screen widths.

So here’s the simple breakdown of what these mean:

min-width = wider than this size

max-width = smaller than this size

Try to remember these, because it will greatly help you as you get into more complex rules with both min-width and max-width included.

Add The CSS Rule-Set

Now you can go ahead and add the CSS as normal. By placing this inside the media query, we are compartmentalizing this CSS snippet to only apply to this criteria.

This media query is stating the CSS rule inside of it should take effect at a minimum screen size of 980 pixels wide and above.

Example

Now for an example of what we are describing. Let’s say you wanted to change the font size of your H1 heading text to 48px on desktop screens wider than 980px. You would use a media query like this:

@media (min-width: 980px) {

After the @media rule and condition is set, you can include nested CSS within brackets that will only be applied for that media query. In our example, we want to target the H1 heading text size in a Divi Text module, so we could do something like this:

.et_pb_text h1 {
font-size: 48px;
}

This would all sit inside the media query. In fact, you could add as many items here as you want which would all apply to the screen surrounding it. Here’s a look at the completed media query:

@media (min-width: 980px) {
.et_pb_text h1 {
font-size: 48px;
}
}

Notice how there would always be two curly brackets at the end. The one for the last css property inside, and the one to close out the media query.

Adding More Conditions

We could also add more conditions. Let’s say you want an effect to take place between two widths. We would use something like this:

@media (min-width: 420px) and (max-width: 600px) {
.et_pb_text h1 {
font-size: 36px;
}
}

There you can see that all we did was add an “and” and then added another set of criteria. In this case, the CSS would only take affect on screens between the two sizes listed, from 420px to 600px.

Finding The Screen Size

To located the width that we need for our media query, we have a couple options.

Use The Browser Tools

You could open a new tab and use your browser’s inspect tool to view different screen sizes of your site.

NOTE: We plan to make a tutorial on using the inspect tool soon!

Use Our Plugin

Or, if you want to precisely adjust the preview directly in the Divi Visual Builder, you could use our Divi Responsive Helper plugin.

Either way, we need to find the pixel size and place that into the media query.

Where To Write The Media Query CSS

We have a very thorough guide on Where To Add Custom Code In Divi that you should definitely check out. In our case, we are writing CSS media queries, so you should be placing this code in the Divi Theme Options Custom CSS box, or if you have a child theme place it there in your style.css file.

Where To Add Custom CSS Javascript and PHP Code In Divi Tutorial by Pee Aye Creative

Do It With A Setting!

Make life easier and use the Divi Responsive Helper instead, the ultimate Divi responsive toolkit with awesome features and settings to help make your website look and work great on all devices!

Divi Responsive Helper by Pee Aye Creative 2.2

Examples of CSS Media Queries In Our Other Divi Tutorials

To help you understand just how powerful media queries are and how you can use them in Divi, let’s take a quick look at some of our other Divi tutorials that use media queries.

Stop Menu Module From Overlapping To Two Lines

In this tutorial we used media queries to change the spacing of the menu items on devices smaller than 1366px by using a media query with a max-width of 1366px and putting our CSS for the menu links inside of it.

Change The Menu Module Responsive Breakpoint

In this tutorial we did a trick with max-width by making the mobile menu show up wider than the default 980px and changed it to 1149px instead. We have two pieces of CSS inside, one to make the mobile menu display at the wider size, and one to make the desktop menu stay hidden until that wider size is reached.

Show Hamburger Menu On Desktop (+Vise Versa)

In this tutorial we are using a min-width of 980px to hide the desktop menu and instead showing the mobile menu on screens wider than 980px.

We also have a second part where we do the opposite and hide the mobile menu below 980px and show the desktop menu there instead.

Last updated Oct 25, 2021 @ 1:52 pm

That's it!

I hope you have enjoyed learning How To Add Custom CSS Media Queries To Divi For Making Your Site Responsive. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

4 Comments

Darren Smith on December 14, 2021 at 7:00 am

Hi

Great blog.

I am in the process of designing a new Divi site, just noticed that on an iPad in landscape mode, the header text is all over the place. How can I just target this, I believe the lanscape resolution is 1024px.

Thanks
Reply
- Nelson Lee Miller (aka The Divi Teacher) on December 14, 2021 at 1:21 pm
  
  Hi Darren,
  I’m not sure what you mean by that description. It shouldn’t look bad by default in Divi, so maybe you have some custom code. You can check our other tutorials, maybe these: https://wordpress-292293-1617718.cloudwaysapps.com/how-to-keep-the-divi-menu-module-from-overlapping-to-two-lines/ https://wordpress-292293-1617718.cloudwaysapps.com/how-to-change-the-divi-menu-module-responsive-breakpoint/
  Reply
Blade on February 24, 2022 at 2:26 pm

There is a huge issue with divi and Ipad devices. There is no quick fix for the responsiveness. Going from landscape to portrait mode is a pain and gives you different views.
Reply
- Nelson Lee Miller (aka The Divi Teacher) on February 24, 2022 at 2:35 pm
  
  Your comment is not related to the post. But since you brought it up, I disagree, you should be able to make a decently responsive site with the built in settings. There are thousands of different device sizes, so it would be ridiculous to try to accommodate each one. Instead you can follow proper responsive practices and it should be fine.
  Reply