How to Keep Columns on Mobile in Divi

by | Feb 3, 2019 | Divi Tutorial | 32 comments

In this tutorial, I show you how to Keep Columns on Mobile in Divi. In short, we’re going to make it so that the columns stay next to each other on tablet and phones vs stacking on top of each other like you’d normally see.

Super handy effect for things like icons, blurbs, logos, images or other elements that you don’t want stacked on top of each other for mobile. It’s also a great way to reduce the amount of scrolling on mobile as well! This effect can be used in a number of different ways on a Divi website. Though I find it best to use on columns that reside within a row because the class we’ll add in the tutorial will control ALL the columns within that module.

Steps to stop your columns from breaking in Divi on mobile:

  1. Add a class to the row > advanced CSS section (like “three-columns)
  2. Add the class to your stylesheet or custom CSS area
  3. Add .et_pb_column after the class
  4. Adjust the with accordingly (like width: 33.33%!important for 3 columns on mobile)
  5. You’ll also want to place this in a media query to make sure you don’t adjust the desktop version (see code below)

And that’s it! Easy peasy. And again, you can add this to all kinds of elements in Divi. Images, text boxes, icons, blurbs and more!

Here’s the CSS I wrote in the video:

@media only screen and (max-width: 980px) {
	.three-columns .et_pb_column {
	width: 33%!important;
}
}

@media only screen and (max-width: 479px) {
	.three-columns .et_pb_column {
	width: 50%!important;
}
}

Here are some example CSS class and code options you can use for any row moving forward!\

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

.two-columns .et_pb_column {
width: 50%!important;
}

.three-columns .et_pb_column {
width: 33.33%!important;
}

.four-columns .et_pb_column {
width: 25%!important;
}

}

Again, you can name the class anything you want, then adjust the column with for tablet and mobile according to how many columns you want. You can use any number of column options and this effect will override the mobile settings. And the same idea here can be applied to things like galleries, projects, blurbs, etc!

Want to level up your CSS game?

Use coupon code "CSS10" for 10% OFF my Divi/CSS Course!