Responsive design has become a modern day web standard, and with the ever-growing rise in the numbers of smartphones, portable devices and tablets, making sure your website adapts well to various device screen sizes is vital. 

If you’re using the Divi theme, you’re a step ahead of the pack as Divi’s default settings come built-in with features that assist in making a website responsive. There may, however, be outliers in your designs that can’t be solved using these built-in features. 

To make sure that the elements of your website display favourably across all modern devices of assorted screen sizes, a little bit of styling code called ‘media queries’ are added to the website’s stylesheet. 

In the following post, we’ll discuss media queries for Divi, explain Divi’s built-in responsive design features and show you how to set up media queries on your Divi site.

Adding media queries requires a stylesheet and child theme. If you don’t already have a child theme set up and running on your Divi site, read the following post which explains what a child theme is and why you need one. 

We recommended testing media queries on a development or testing site. We do not recommend testing code on a live site. Always make a backup of a live site before pushing edits from your staging site. 

Responsive Web Design With Divi’s Built-In Features

One of the best features of the Divi theme by Elegant Themes is that the framework comes prepped and ready for responsive web design. 

All throughout the site are built-in features that help web designers of all skill levels set their websites up to display well across various devices and screen sizes.

While you’re designing your website, you can toggle between different screen size views; desktop, tablet and mobile; to see how your site will render on each device.

First, you can toggle between the three different device displays in the Theme Customizer. Simply clicking each of the respective icons will indicate what your website will look like, allowing you to create theme customizations early in your development process that will reflect site-wide.

Next, with Divi, you can make sure that each of your website’s layouts will display well across devices while you build them. As you’re busy designing a page, post or project layout, simply click on the device icons to see how the content of each layout will display on each device. 

Finally, each module comes with the ability to specify various settings to achieve the most suitable, responsive display for each device. For example, right from the Divi Builder itself, you can set various dimensions for an array of modules, such as setting the font size of text to the padding or margin spacing for modules and much more. 

To set these sizes, hover just to the right of the option name and wait for a small mobile icon to display. As you click on the icon, additional entry boxes will be revealed. Here, you can enter different sizes for different devices. 

With these options already built into Divi, it’s incredibly easy to build a responsive website. However, even with such a high degree of customization at your fingertips, there may be a few sections, rows or modules that don’t look 100% right on every device. 

To solve the display of a few of these graphic outliers, media queries are used. 

What Are Media Queries?

Modern day devices; smart phones, tablets and computers; come in an array of sizes. For example, small smart phones have a display width of roughly 400px while desktop computers can have large monitors whose display can begin at around 1400px.

For example, consider a snippet of Heading (H1) text with a font-size set to 80px. This will display nicely on a laptop or large monitor, however, it’ll look terrible on a mobile device, even more so on the smaller sized ones.

As mentioned above, even though Divi’s responsive tools are an incredible help in aiding responsive design, some elements will need special attention. Also, keep in mind, there are a plethora of device sizes so there’s quite a considerable chance that you’ll need to add a few code tweaks here and there to accommodate for these devices.

How to Add Media Queries to Divi

If you’ve identified an element that you’d like to tweak, you’ll need to add media query code to your stylesheet. 

There are three main areas that CSS code can be added to a Divi website:

1. The stylesheet of a child theme

2. The Custom CSS area in the Divi Theme Options console

3. In the Additional CSS area of the Theme Customizer

Here is an example of media query code with no customization added. 

/* Smartphones in portrait mode (0-479px) */

@media only screen and ( max-width: 479px ) {

/* your css goes here */
}

In the above code, the media type of screen is targeted, specified further to screens with a size that ranges between 0px and 479px. After the opening brackets, a commented out line indicates where you can add your CSS.

Here, you’d enter the specific CSS to style the element in the way you’d like, for example:

In this example, I’m setting a piece of H1 heading text to display with the font size of 30px on small phones with a width of less than 479px. 

The final media query entry for this would look something like:

/* Smartphones in portrait mode (0-479px) */

@media only screen and ( max-width: 479px ) {

h1 { font-size: 30px; }
}

The full list of media queries are:

/* Large screens (1405px upwards) */

@media only screen and ( min-width: 1405px ) {

/* your css goes here */
}

@media only screen and ( min-width: 1100px ) and ( max-width: 1405px) {

/* your css goes here */
}

@media only screen and ( min-width: 981px ) and ( max-width: 1100px ) {

/* your css goes here */
}

@media only screen and ( min-width: 768px ) and ( max-width: 980px ) {

/* your css goes here */
}

/* Smartphones in landscape mode (480-768px) */

@media only screen and ( min-width: 480px ) and ( max-width: 767px ) {

/* your css goes here */
}

/* Smartphones in portrait mode (0-479px) */

@media only screen and ( max-width: 479px ) {

/* your css goes here */
}