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

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.

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.

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 these 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:

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:

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:

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.

Finding The Screen Size

To locate 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.

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.