Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Use Custom Responsive CSS Media Queries In Divi

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

▶️ Please watch the video above to get all the exciting details! 👆

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

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

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 effect on screens between the two sizes listed, from 420px to 600px.

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.

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 Plugin by Pee Aye Creative

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin
Divi Logo (2)

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Featured Products

Asset 4

New! Trail Guides

Follow a series of blog posts carefully arranged around a specific topic or goal! Keep track of your progress by marking posts completed, just like a free course!

View Trial Guides

Divi Trail Committee Membership badge with map design

Join The Trail Committee!

Show support for our ongoing work creating community resources at Pee-Aye Creative and enjoy exclusive member perks in return.

Learn More

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

10 Comments

Comments By Others

  1. Kristýna Sovová

    Hi, I have a question.
    I have a sesction, and row with 4 columns. But on the small laptops (1024 px), this looks odd and I need this to be displayed as only two column when the screen is 1024 px. I tried to write a media query. But did not help. I gave a ccss class to the row column_1_2_on_laptop (row advanced) and in custom css a add this code:

    @media only screen and (min-width : 850px) and (max-width : 1200px) {
    .column_1_2_on_laptop .et_pb_column {
    width: 47%!important;
    margin-right: 3%!important;}
    }

    Could you please help me, do you have any idea how to fix it?

    Many thanks, Kristýna

    Reply
    • Hemant Gaba

      Hi Kristyna!

      It should be adjusted by default. However, if the issue happening, then there must be some third-party code causing the issue. For the CSS relief, use this code:

      @media only screen and (min-width : 850px) and (max-width : 1200px) {
      .column_1_2_on_laptop .et_pb_column.et-last-child{
      width: 47.25% !important;
      margin-right: 5.5% !important;
      }

      .column_1_2_on_laptop .et_pb_column{
      margin-right: 0 !important;
      }
      }

      However, the media query reflects on the tablet screen as well. Consider using the min-width: 981px in media query.

      Reply
  2. TIm Roberts

    Another great Article.

    How do I stop the menu from going into the logo when a customer zooms in over 110%

    Reply
    • Hemant Gaba

      Hi Tim!

      Please avoid adding the width of the element more than 100%, it could be unresponsive.

      Reply
  3. Daniel

    Great article.
    Nevertheless you’re help would be appreciate it regarding the landscape mode on phones.
    Making additional media queries for landscape mode resolution breaks everything on portrait mode for phones with that exactly resolution in portrait mode.
    Is there a possibility to make the media queries dependant of screen ratio (for example giving the condition min-width / min-height: 0,56)

    Reply
    • Hemant Gaba

      Hi Daniel!

      Please note that we try to use the media queries by the breaking point defined by the Divi, and most of theme works fine for both landscape and portrait mode. However, if you want to target the landscape mode separately, then you can use another variable in media query orientation: landscape. The code will be as follow:

      @media all and (orientation: landscape) and (max-width:980px) {
      body {
      display: none !important;
      }
      }

      Let me know how it goes!

      Reply
  4. Blade

    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) <span class="comment-author-role-label author-label">Author</span>

      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
  5. Darren Smith

    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

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart