Divi, media queries and 2×2 mobile

by | Mar 21, 2015 | Divi, 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 it’s 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

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 very simple 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

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:

We can also do this to a row of three columns. For this, I have set two of the columns to 50% and centered the third below using :nth-of-type(). If you want to see it in action, resize your browser window and the above blurb modules will fall inline.

It is important to keep usability in mind. In theory, you could keep four columns on mobile but you then have to worry about having enough touch area. I think 2x2 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.