Keep Columns on Mobile With Divi

One of the great things we love about Divi is that it is pretty much responsive right out of the box. However, sometimes we might want to keep columns on mobile instead of stacking them.

Like everything in life, there is good and bad in that. For instance, sometimes we may not want to stack our columns on mobile. Sometimes, it makes sense to still have columns, even on a phone. But Divi will stack them automatically. Don’t sweat it. It’s a very easy fix!

As you probably know, Divi consists of sections, rows, columns, and modules. Sections hold rows, rows hold columns, and we put our modules in the columns. The way Divi works behind the scenes is in its CSS, it tells the row to stack the columns on a certain screen size. In fact, there are two main breakpoints in Divi to be aware of. The first one happens at 980 pixels. Then, from 980px to 768px is considered “tablet” size. Below 768px (the other breakpoint) is considered “mobile”.

If you have more than three columns, we will be using a media query to make it happen and I want you to see why we have chosen the breakpoint we have.

How To Keep 2 And 3 Columns On Mobile

For a two column or three column row, it is very simple to keep the columns side-by-side in Divi. You simply open the row settings, click the “Advanced” tab, then open up the “Custom CSS”, make sure you are on the “Module Elements” tab and look for the box that says “Main Element”. Simply add this line of CSS: display: flex;

That’s it. That’s all there is to it. Now, your columns will remain columns even on the smallest devices!

How To Keep 4 Columns On Mobile

We’ve got to approach this a little differently. It is a tad bit “trickier” but still very easy to do. Follow me step by step and you’ll have no problem at all.

This time, instead of adding CSS directly to the row, we are going to give it a class and paste a snippet of CSS in a different spot. Let’s start by giving our row a class.

Open up the row settings. Click on the “Advanced” tab. Now, the first option is “CSS ID & Classes”. Let’s open that. Now we can type in the class name we want to give it. I chose “four-cols”. We will use this selector to target this in our custom CSS next.

Adding Our Custom CSS

Let’s get back to our WordPress Dashboard. Find the “Divi” tab. It’ll be somewhere near the bottom unless you’ve customized things on your dashboard. Click Divi. You’ll be on “Theme Options” by default. It’ll say “Divi Theme Options” at the top and you should be on the “General” page.

If you scroll to the very bottom of this page, you’ll see a section for “Custom CSS”. This is where we will paste the following code.

@media(max-width: 980px) {
    .four-cols .et_pb_column {
        width: 25% !important; 
    }
}

Allow me to explain what is going on here. First, this is called a media query. It is saying anything 980 pixels and smaller should apply the following code. Remember how we talked about the breakpoints a little before? So this will take place on tablets and phones.

Next we have our selector – .four-cols .et_pb_column. This is saying, any element that has the class of .et_pb_column inside of an element with the class of .four-cols, apply the following styles.

By default divi gives each column a class of .et_pb_column. This is why we gave our row a class of .four-cols. If we didn’t use that, this would apply to every single column on our page and we definitely don’t want that.

The style we are giving it is just telling it to be a width of 25%. Since there are four columns, each one being 25% totals 100%, right? We are adding the !important flag to make sure these styles take precedence over any other styles.

How To Keep 5 Columns On Mobile

If I told you it was the exact same as four columns with a single little change, would you know what to do? Well, that’s the case. OK, maybe two changes. We probably want to change our class name to .five-cols so it makes sense in our heads.

Really, follow those same instructions. Then, in our code, since we changed the class we gave it to .five-cols we would want to change that in our code. Change .four-cols” to .five-cols. Then, we don’t want each of them to be 25%. We now have five columns instead of four. What is 100/5? 20. We just change the width from 25% to 20%. That’s it!

Wrap Up

Divi is so fun to work with. It’s very easy to customize with your own code and you can pretty much build anything you want with it. I’ve built some very very CUSTOM websites with Divi. The more you use it, the more familiar you’ll become with it and therefore be able to get creative in how you display things.

I remember when starting out, I found it difficult to figure out how to make this a feature. With a little playing around, I was able to get my columns to remain columns on mobile devices too. If you have any questions, suggestions, or found this helpful, as always, please let us know in the comments below.

2 Comments

  1. Heather G

    This is a game-changer! Thanks!

    Reply
    • JD Simpkins

      I’m glad you found this helpful Heather. I remember all the searching around I had to do to get this figured out when I first started using Divi. Once you get used to little tricks like this, you will be unstoppable in Divi! Please let me know if there are any other topics that would help you.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Related Posts

No Results Found

The page you requested could not be found. Try refining your search, or use the navigation above to locate the post.