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.
- Aspect ratio
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 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.
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.
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:
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 differnt 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.
Ether 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.