Divi, media queries and 2×2 mobile

by Jun 20, 2019Divi, Helpful Hints

Divi is a wonderful, versatile and mobile-ready theme. However, some might wish it were a little more flexible when it comes to its mobile layout. By default, all columns become their own row when viewed on a mobile device. If you have one row of four columns on a desktop, you end up with four rows in one column on mobile. This makes the page four times as long and therefore, may not be ideal.

With a little CSS and a few media queries, we can get any layout we want on a mobile device. For this example, we will start with a page filled with a variety of column options.

N

this is a blurb

N

this is a blurb

This one has more data in it so see how column heights stay
N

this is a blurb

N

this is a blurb

N

this is a blurb

N

this is a blurb

N

this is a blurb

N

this is a blurb

N

this is a blurb

Above, we have three rows, one with four columns, one with three columns and one with two columns. If we use no media queries, we will have an extremely long page with one column and nine rows.

With a media query and adding a single CSS class to our row, we can get a two by two layout. In our Divi row, we are going to add the class of twoX2.

First, open the row settings
Next, add twoX2 to the css class in the row Custom CSS tab

The Code

Once you’ve done that, save your draft or publish your page. In your child theme css file, or in Divi theme options/custom css add the following:

You might have noticed we only have a media query for media (max-width: 980px). This is a max-width media query and it will take care of all screen sizes below 980px. That means it covers your phones and tablets with one query.

Spacing

Divi has had a lot of updates over the years, and you can now use the Divi controls instead of custom CSS to keep spacing between the modules on devices.

For mobile, you will need to adjust the module width and adjust the module alignment. Align the modules on the left to the left and the modules on the right to the right.

Keep in mind; if you added any other padding or margins on mobile and tablets, you might need to adjust those to get the correct spacing.

Background

Previously, you had to but the background color on the column instead of the row to get equal heights. Now, you still need to make “Equalize height” in the column settings, but you can add the background color to the module instead.

You will need to go to the module sizing options and set the height to 100%. You might have an issue on mobile with the third column (in a row of 4) background being short. It seems to be a bug and only happens on some devices and not all.

Accesibility

It is vital to keep accessibility in mind. In theory, you could keep four columns on mobile, but you then have to worry about having enough touch area. I think 2×2 would be the smallest you would want to go.

As you can see, media queries can open an entire door of flexibility for any screen size. As far as finding a starting place for media queries, I like to use one from CSS-Tricks. It is updated often and has so far been very reliable. If you have any questions, I am happy to help.