How to Keep Columns on Mobile in Divi
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:
- Add a class to the row > advanced CSS section (like “three-columns)
- Add the class to your stylesheet or custom CSS area
- Add .et_pb_column after the class
- Adjust the with accordingly (like width: 33.33%!important for 3 columns on mobile)
- 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!
Links mentioned in the video:
Similar tutorials:
Want to level up your CSS game?
Use coupon code "CSS10" for 10% OFF my Divi/CSS Course!
Are you ready to BUILD and GROW your web design business?
I've created a FREE 10-STEP ACTION PLAN to help you fast-track your web design success.
Hi Josh
Great post! But I am really struggling to get this to work in the Extra Theme, which uses a category layout as the home page. Any assistance would be greatly appreciated? Its for mobile and tablet view only. That section has been disabled on desktop.
mmm yeah honestly I don’t use Extra and am not familiar with the little differences. You could probably use the Divi Builder plugin in Extra and use this method though.
I realize the comment is nearly a year old now, but wanted to chime in: I haven’t tried to use this on an Extra category layout page, but it works fine on a normal page in Extra, and thank you for the post.
But one thing: The Extra theme doesn’t need the Divi Builder plugin, it has the builder built in, just like Divi does.
As always, great tutorial, Josh! I’ll definitely be using this with my clients. Thanks so much for taking the time to share the value!
Awesome to hear Jason. No problemo!
Hello Josh, this is great, thanks
Greetings from Barcelona, (Catalonia)
Thanks Ignacio! Howdy from Ohio 🙂
“… a great way to reduce the amount of scrolling on mobile …”.
I know almost everyone hates doing that. You’ve solved a big and annoying problem. Thanks.
You are the best, Josh – My Master Game Changer!
Thanks, Kheti! You’re right – it is a big problem that can be very annoying. Glad the tutorial helped!
This is so useful!
Is there a way to stop the blog module from collapsing until it gets to a set screen width, the 980px breakpoint is too soon for my needs.
Many thanks
Thanks Dan. Yeah you can just adjust the media query breakpoint to whatever width you want instead of 980px.
I got into breakpoints and media query control in much more detail in my CSS Course if you’re interested taking all of this to the next level. If so, I have a promo going on for $30 OFF. You can use code CSS30 at checkout if interested!
Hi Josh,
Love this and works really well.
Is there a way of keeping the gutter width settings though? When on smaller screens, the images end up touching each other and I’d ideally like the gap between them.
Thanks.
Ah, you could add some padding in the media queries for mobile!
Note that you’ll get a warning using width with padding. To solve this, also add box-sizing.
Example:
box-sizing: border-box;
width: 33.33% !important;
padding: 0 10px;
Hi. Great tutorial. I implemented it on a Divi site and can only get the layout to work on landscape orientation and not portrait. Any ideas?
Thanks Thom. You’d just need to adjust the media query size to a different breakpoint. Not sure how much CSS you know but my CSS Course will really help you level up with all of that! If interested be sure to use the promo code that I have out now, CSS30 for $30 OFF!
This isnt working for me… how can i get some additional help quickly? I am building my website by myself because of cost and my mobile site looks horrible and therefore I cant make my site live yet
Brenton, recommend asking in my Divi FB group as you’ll get some quick help.
Can you do something similar when your columns are different widths? Like having two columns were one is 25% and the other is 75%; and then have them shrink instead of collapsing?
Yep you can adjust the percentages accordingly! Shrinking would require some media queries with different font sizes and padding. I cover that in my CSS Course so if interested in learning more, be sure to use the promo code that’s out now CSS30 for $30 OFF!
Excellent post! we have use it on many projects. Thank you!
Josh,
thanks for posting this. I found it very helpful.
Thanks,
Chad
Josh, this is absolutely brilliant! You made it SO SIMPLE! I especially appreciate how you showed us how to work with media screen CSS in viewport break sizes. I’ll bet your CSS course is awesome!
Thank You So Much,
Glen
Thanks, Glen! Appreciate the feedback and would love to have you in my CSS Course if you’re ready to take the next step with CSS. If interested, I have a promo out right now for $30 OFF, use code CSS30 at checkout 🙂 Let me know if you have any questions and I hope to see you in my course and private course FB group community!
Hi Josh
Love your videos, and the way you explain things.
I tried to get this to work with theme builder, but didnt work. Any idea how i can get this to work with the theme builder?
Hey Atif, this should work regardless if the Theme Builder is on or off. When you put the CSS in, make sure to clear cache and refresh browser!!
Maybe this is useful to someone here:
I found myself in a scenario where there’s 2 columns in a row. However, the blurbs I wish to present 3 across on tablet were stacked together in the last column.
The above CSS is not useful in that scenario. Instead, adjust each blurb’s width settings:
desktop: auto width;
tablet: 32% width;
mobile: 100% width.
Create a class and add it to each blurb’s advanced settings, ie. “blurb-three-columns”.
Then in your stylesheet, add “display: inline-block” to above class (using @media query targeting tablets).
Now your blurbs should stack 3 across on tablets only and not affect other columns in the row.
Good stuff, thanks!
This is something that has been bugging me for a while now. I can’t wait to use this on my site, thanks Josh!
I needed this a long time ago! Thank you very much Josh! I definitely need your CSS course.
Excellent Tip and Trick
This is awesome! Thank you.
Desktop 4 images in a line and this moves to 2 on mobile.
On tablet the images still stack though? Any advice or extra code use?
Many thanks.