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.
▶️ 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.
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.
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!
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.
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
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.
Another great Article.
How do I stop the menu from going into the logo when a customer zooms in over 110%
Hi Tim!
Please avoid adding the width of the element more than 100%, it could be unresponsive.
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)
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!
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.
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.
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
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://www.peeayecreative.com/how-to-keep-the-divi-menu-module-from-overlapping-to-two-lines/ https://www.peeayecreative.com/how-to-change-the-divi-menu-module-responsive-breakpoint/