Finally! Here’s a solid and easy way to change the number of columns on mobile and tablet in Divi. By adding some custom CSS you’ll get full control over how many columns to display on mobile and tablet in each Divi row.
Unlock 2-6 columns on mobile and tablet with nice spacing between and beneath the columns. This is a more robust solution then some quick & dirty fixes, for example display:flex or width:50%,that are shared in various Facebook groups and blogs. We’ll stay consistent by using the same type of code that Divi already uses for desktop columns, and apply it for smaller screens too.
In the end of the article, I’ll show how you can save time by using the the Divi Global Presets to change the number of columns on mobile and tablet – without having to add custom CSS classes to your rows.
Before (1 column)
After (2-6 columns)
1. Add CSS to enable multiple columns on mobile and tablet in Divi
The first step to change the number of columns in Divi for mobile and tablet is to add some custom CSS.
- Log in to your WordPress dashboard
- Go to Divi » Theme Customizer » Additional CSS
- Copy and paste the CSS below:
Pro tip: Copy the entire CSS snippet to access all the additional column options for mobile and tablet. If you only need one specific option, for example 2 columns on mobile, you only need to copy that specific part of the snippet (row 3-21 below).
/*** Change Mobile Columns By DiviMundo.com ***/
/* 2 Columns Mobile */
@media all and (max-width: 767px) {
html .two-col-mob .et_pb_column {
width:47.25% !important;
}
html .two-col-mob .et_pb_column:nth-last-child(-n+2) {
margin-bottom:0;
}
html .two-col-mob .et_pb_column:not(:nth-child(2n)) {
margin-right:5.5% !important;
}
}
/* 3 Columns Mobile */
@media all and (max-width: 767px) {
html .three-col-mob .et_pb_column {
width:29.6667% !important;
}
html .three-col-mob .et_pb_column:nth-last-child(-n+3) {
margin-bottom:0;
}
html .three-col-mob .et_pb_column:not(:nth-child(3n)) {
margin-right:5.5% !important;
}
}
/* 4 Columns Mobile */
@media all and (max-width: 767px) {
html .four-col-mob .et_pb_column {
width:20.875% !important;
}
html .four-col-mob .et_pb_column:nth-last-child(-n+4) {
margin-bottom:0;
}
html .four-col-mob .et_pb_column:not(:nth-child(4n)) {
margin-right:5.5% !important;
}
}
/* 5 Columns Mobile */
@media all and (max-width: 767px) {
html .five-col-mob .et_pb_column {
width:15.6% !important;
}
html .five-col-mob .et_pb_column:nth-last-child(-n+5) {
margin-bottom:0;
}
html .five-col-mob .et_pb_column:not(:nth-child(5n)) {
margin-right:5.5% !important;
}
}
/* 6 Columns Mobile */
@media all and (max-width: 767px) {
html .six-col-mob .et_pb_column {
width:12.083% !important;
}
html .six-col-mob .et_pb_column:nth-last-child(-n+6) {
margin-bottom:0;
}
html .six-col-mob .et_pb_column:not(:nth-child(6n)) {
margin-right:5.5% !important;
}
}
/*** Change Tablet Columns By DiviMundo.com ***/
/* 1 Column Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
html .one-col-tab .et_pb_column {
margin-right:0 !important;
width:100% !important;
}
html .one-col-tab .et_pb_column:not(:last-child) {
margin-bottom:30px !important;
}
}
/* 2 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
html .two-col-tab .et_pb_column {
width:47.25% !important;
}
.two-col-tab .et_pb_column:nth-last-child(-n+2) {
margin-bottom:0;
}
html .two-col-tab .et_pb_column:not(:nth-child(2n)) {
margin-right:5.5% !important;
}
}
/* 3 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
html .three-col-tab .et_pb_column {
width:29.6667% !important;
}
html .three-col-tab .et_pb_column:nth-last-child(-n+3) {
margin-bottom:0;
}
html .three-col-tab .et_pb_column:not(:nth-child(3n)) {
margin-right:5.5% !important;
}
}
/* 4 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
html .four-col-tab .et_pb_column {
width:20.875% !important;
}
html .four-col-tab .et_pb_column:nth-last-child(-n+4) {
margin-bottom:0;
}
html .four-col-tab .et_pb_column:not(:nth-child(4n)) {
margin-right:5.5% !important;
}
}
/* 5 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
html .five-col-tab .et_pb_column {
width:15.6% !important;
}
.five-col-mob .et_pb_column:nth-last-child(-n+5) {
margin-bottom:0;
}
html .five-col-tab .et_pb_column:not(:nth-child(5n)) {
margin-right:5.5% !important;
}
}
/* 6 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
html .six-col-tab .et_pb_column {
width:12.083% !important;
}
html .six-col-tab .et_pb_column:nth-last-child(-n+6) {
margin-bottom:0;
}
html .six-col-tab .et_pb_column:not(:nth-child(6n)) {
margin-right:5.5% !important;
}
}Available mobile columns options:
- 1 column on mobile
If you don’t change anything, the Divi row will display only one column on mobile.
- 2 columns on mobile
- 3 columns on mobile
- 4 columns on mobile
- 5 columns on mobile
- 6 columns on mobile
Available tablet columns options
- 1 column on tablet
This is useful if you want to prevent Divi from displaying for example three columns on tablet when displaying six columns on desktop.
- 2 columns on tablet
- 3 columns on tablet
- 4 columns on tablet
- 5 columns on tablet
- 6 columns on tablet
2. Add CSS Classes to your Divi Rows to change the number of columns on mobile and tablet
To apply the new column count for mobile and tablet you need to add the matching CSS class(es) to your Divi row. That will actually take less time than reading this paragraph of text.
- Enable the Divi Visual Builder on the page that you want to edit
- Edit the row (that’s the box with the green border) by clicking the cogwheel
- Go to Advanced » CSS ID & Classes » CSS Class
- Add one or two CSS classes, matching the number of columns that you want to use, from the table below.
Please notice: Sometimes, the Divi Visual Builder does not display the new column structure the correct way in backend. Save and preview in frontend to see the final result.
Number of columns
Mobile CSS class
Tablet CSS class
One
[no class needed]
one-col-tab
Two
two-col-mob
two-col-tab
Three
three-col-mob
three-col-tab
Four
four-col-mob
four-col-tab
Five
five-col-mob
five-col-tab
Six
six-col-mob
six-col-tab
The table above is actually a live example of this code using the classes “three-col-mob three-col-tab” to display three columns on tablet and three columns on mobile (the same as on desktop).
Examples of how to apply the CSS classes on your Divi rows
Just separate the mobile class and the tablet class with a simple space, for example: two-col-mob four-col-tab
Here are four examples of how you can apply the CSS classes to change the numbers of columns on mobile and tablet in your Divi rows. Just leave the CSS Class field empty if you want to use the default number of columns.
2 columns on mobile and 4 columns on tablet
Add the CSS classes two-col-mob four-col-tab in the row settings to achieve this.
3 columns on mobile and 3 columns on tablet
Add the CSS classes three-col-mob three-col-tab in the row settings to achieve this.
3 columns on mobile and 6 columns on tablet
Add the CSS classes three-col-mob six-col-tab in the row settings to achieve this.
1 column on mobile and 2 columns on tablet
Add the CSS classes two-col-tab in the row settings (one column for mobile is default in Divi so no custom CSS is needed for that).
3. Pro Tip: Use Divi Global Presets To Change Number Of Columns on Mobile And Tablet
This last step is not necessary but it’s a nice way to speed up your design process by adding different mobile row structures to your Divi Global Presets library.
This way, you don’t need to add custom CSS classes each time that you want to change the number of columns in a row. Instead, you can just choose the row numbers that you want to use from the Presets dropdown when you add a new row.
Changing mobile row numbers with Divi Global Presets
- Make sure that you have added the custom CSS in the Theme Customizer (see step 1 above)
- Create a new row on a page, a post or in a layout in the Divi Library. It does not matter which column structure you choose for the row.
- Close the Insert Module modal and open the Row Settings by clicking the cogwheel
- Go to Advanced » CSS ID & Classes
- Enter the CSS Class(es) that you want to add to your preset (see step 2 above) – for example two-col-mob four-col-tab
- Now, click the Preset: Default toggle in the purple top bar of the Row Settings
- Click Create new preset from current styles
- Give your new Preset a clear name, for example 2 col mob | 4 col tab
- Make sure that Assign Preset To Default is set to NO and save by clicking the green checkmark button
- Repeat the process to add as many Row Presets you like.
That’s it! To change the number of columns on mobile and tablet, just click the Preset toggle in the row settings and choose one from your list.
3. Use the presets on any page or post.
That’s all for today!
I hope that you enjoyed this post. Subscribe to DiviMundo on YouTube and join our Facebook group for more crisp content on WordPress and web design.
👉 Related post: How To Adjust Divi’s Column Stacking Order on Mobile Devices
👉 Related post: How to Change the Number of Columns in the Divi Blog Module
👉 Related post: Changing the Number of Columns in the Divi Gallery Module at Different Breakpoints
Thanks very much for this helpful blog. It has a lot of detail however your explanations are clear and practical. Also you have given many possibilities for different column options on mobile and tablet and the process is easy with your explanation. I have bookmarked this blog for my future designs … thanks very much for your solution.
That’s nice to hear Rob! I’m really glad you liked it. 🙂
Thank you so much! this is really a great tutorial :). I got a small question, hope it is ok to ask as you already gave away a great amount of info.
I got a 3 column row in Desktop, but i want to have it as 2 column row on mobile, it works but then it is 2 columns +1 beneath. the next row is the same. so you always have:
2 columns
1 Column + 1 free spot
is there a way to fix this?
Desktop
2 rows each with 3 columns
On Mobile I want
3 rows with 6 columns from above.
Appreciate it !
Thanks T, I’m glad you like it! Well, it’s tricky to nest different rows in Divi. I think the easiest way would be to hide the desktop rows on mobile devices (under the Advanced tab) and create a new three row structure for mobile and hide it on desktop. It’s a workaround but it should work. You could save the modules in the columns as global modules in the Divi library, to avoid the need for double updates.
Wow! Such an excellent, practical guide, Victor – thanks for sharing. 👉
This blows all other similar tuts out of the water, and goes much further than I was even looking for! 👉
I’m now off to read/bookmark the rest of your blog.
Keep up the good work. 👉
Thanks a lot for your kind words! 🙂 More good Divi stuff is coming up soon.
Thank you sooooo much for sharing this. I’ve been looking for a way to do this for about 3 weeks now but I’d been struggling to find something because I didn’t know what to google. I’d been manually adjusting margins to achieve the look I wanted but it was driving me nuts. I finally came across your video which lead me here. Thank you! I can’t wait to finish my website redo now that I have this tool in my kit.
That’s awesome, I’m glad you found your way! 👉
Thanks a lot, this is so very helpful!
I ran into 1 strange issue: when using this in the Divi theme builder. The two-col-mob class does not seem to work.
I have a page on which everything looks fine, but when I save it to the Divi library and then use it as a theme builder template, on mobile, the 2 columns are stacked and not shown next to each other. The tablet version is fine. How could this happen and do have an idea how to fix this please?
Thanks so much for your reply.
Hi Pieter! Make sure that the CSS class still is in the row settings. If so, you could try to clear the Divi Static CSS files and also the website cache and browser cache.
If that doesn’t help I’ll need a link to take a closer look.
Hi Victor,
Thanks for your reply. I found out that the phone page doesn’t look right in the template withing the builder, but the pages that are assigned to the template look like they should, so there was no issue actually!
Thanks again for your article!!
Pieter
I see! Yeah, sometimes the Divi Builder doesn’t read the custom CSS in backend for some odd reason. But I’m happy to hear that it looks good in frontend. 🙂
I just discovered your blog looking for this solution and have already bookmarked it. Lots of interesting information. I love this trick.
I only see one problem, that if you select an asymmetric column structure, when applying this css it keeps the columns symmetrical.
How could I change the CSS code to be able to create the asymmetric columns?
Thanks.
Thanks Kovalski! Maybe I’ll do another tutorial on how to create asymmetric columns in mobile. Meanwhile, you can achieve this effect with plugins like Divi Toolbox.
Hi Randy! This seems to be a rather complex problem. Try to reinstall WordPress and perhaps delete and republish the posts to see if that helps.
One vote for that tutorial. I’ll take a look at the Divi Toolbox. Thank you very much.
hi
the 3 column on tabk like this does not work
.three-col-tab .et_pb_column:not(:nth-child(3n)) {
margin-right:5.5% !important;
}
it works only when you set a lower % on not(:nth-child(3n))
Hi Hoyem! I just tested the snippet on a clean installation with Divi 4.20 and it works fine with three columns on both a standard iPad and iPad Mini. There could be some other CSS, setting or plugin that’s conflicting with this code on your site. But I’m glad you found a solution that worked.
This code was excellent and did the trick for 6 affiliate logos in a row. THANKS.
Awesome! I just checked out your site and it looks cool with the gradient text btw. 🙂
Hi Victor! Really great info One issue I am having is spacing, I want none like on my desktop but on my mobile and tablet I have a 1px gutter that I really do not want. Do you know how to fix?
Hi Tara! Try to replace the old four column snippet with this one:
/* 4 Columns Mobile No Gutter Width */@media all and (max-width: 767px) {
.four-col-mob .et_pb_column {
width:25% !important;
}
.four-col-mob .et_pb_column:nth-last-child(-n+4) {
margin-bottom:0;
}
.four-col-mob .et_pb_column:not(:nth-child(4n)) {
margin-right:0% !important;
}
}
Let me know how it goes! 🙂
HI, i’m stuck ..
This technic works for all my site, and then for my new one, it don’t work on mobile
Can you help we with that ?
It’s the section on the bottom of the site, after the footer, i want four icon align next to each other on mobile and tablet
https://freesoulsapparel.com/produit/set-sail-to-freedom
Can you check this link ?
Hi Matheo! The four icons are vertically aligned when I check in tablet and mobile. Maybe it was just a caching issue?
Hello Victor,
thank you for the super video.
But I still have problems with columns per row on mobile and on desktop.
Divi Enable Visual Builder isn’t an option in product categories.
Can you recommend/help what I need to do? 🙂
Thanks
Hi Andrew! Category templates are created in the Divi Theme Builder. I have a chapter on this in my Divi course that you can watch. It’s about Post Categories but you can apply the same method but just add a shop module instead of the post module and then display the template for Product categories. Check out: https://www.youtube.com/watch?v=8LCnT-xrr6M&t=20517s
Thanks, I will write about my success 🙂
Hello Victor, I saw your video about post-model (to use theme builder for the category).
But I don’t have a position on the theme builder (only- theme options, theme customizer, and more, but not theme builder).
When I tried to update Divi Theme Options updates I saw that I don’t have a User name ad API key.
Maybe previously a guy, who has created a website, did something wrong (illegal).
Victor, can you recommend, what I need to do that sort out this situation? I mean, if I will buy Divi license, my Website doesn’t break?
And one more question I have two templates Divi and Divi ecommerce it’s the same I mean, that DIVI it’s a first Theme builder position?
Thanks, Andrew
You should always have an active license to access security updates and new features. You can purchase your own license with 10% off with my affiliate link at https://divimundo.com/divi10/
Just adding the license key to your website will not break it. But if you haven’t updated Divi in a long time, you should make a backup before doing the update. You can use a free plugin like Duplicator or check with your web host.
Thanks
I will do that 🙂
Hi Victor,
I have been facing an issue with the code. I have used it so many times and worked perfectly, but now there is a problem I can’t resolve by myself.
I have a WooCommerce website, build with Divi. I have created different page layouts for every product. The problem is that on one of the product pages the codes seem to work, but on others – no. For some reason, it is not getting the column class or something 🙁
On this page is working:
https://caeyahair.com/bg/product/arganova-terapia-za-suha-kosa/
On this page isn’t working:
https://caeyahair.com/bg/product/proteinov-eksfoliant-za-mazna-kosa/
Please give me a hand! Greetings, Albena
Hi Albena! There is some CSS in the Theme Builder that overrides the custom CSS. Try to add this snippet and it will fix the issue:
@media all and (max-width: 767px) {.et-db #et-boc .et-l .two-col-mob .et_pb_column {
width:47.25% !important;
}
Hi, Victor! Thanks for the fast replay! It worked for the two columns, but now there is no space between the three-column row. How to fix it also? And one last question – is there a way to find what causes this overwriting in the builder?
Regards, Albena
The snippet only affects the column width in rows with the class two-col-mob so the spacing issue is probably from some other setting. It’s hard to tell about the details without wp-admin access.
Hi, Victor! I made a few things:
– removed the equal column height;
– added: #page-container #main-content before the classes, for example:
#page-container #main-content .three-col-mob .et_pb_column {
width:29.6667% !important;
}
That solved the issue 🙂 Thanks!
Cool! The more specific the targeting is, the higher priority it will get.
Hello Victor, thank you for your post, it is very complete. Perhaps this problem interests you. I need a row with 5 modules to become 2 columns “(min-width: 768px) and (max-width: 1500px)”. I can’t solve it. Thank you!
Hi Andrés! Tricky one, but this could be a start:
1. Add the class five-two-col-mob to the five column row.
2. Paste this CSS in the Theme Customizer:
/* 2 Columns Custom */@media only screen and (max-width: 1500px) and (min-width: 768px) { html .five-two-col-mob {
display:flex;
flex-wrap:wrap;
}
html .five-two-col-mob .et_pb_column{
width: 50%;
} }
/* Disable default two columns on tablet */
@media only screen and (max-width: 767px) and (min-width: 480px) {
html .five-two-col-mob .et_pb_column{
width: 100% !important;
margin-right:0 !important;
} }
3. Save and preview in frontend. Perhaps you need to add some additional tweaks. Hard to tell without seeing the actual page.
Hello Victor! Thanks for your time and sorry for the inconvenience. doesn’t work, but only with the “width” attribute. There is no way to change the “width” up to 980px… Any other change like for example the background color works with @media… I’m very intrigued. Thank you so much! If you want I can pass you the web where I am trying this change.
Sure, I can take a look and see what I can do.
Thank you! This is the part where I want the 5 row modules starting at 1500px to be placed in 2 columns…
https://marfisch.com/projects/livingbetter/bienestar-fisico/
Thank you very much again!
This CSS will change the five column row to a two column row in viewports that are between 768px and 1500px wide.
/* 2 Columns Custom */@media only screen and (max-width: 1500px) and (min-width: 768px) {
html .five-two-col-mob {
display:flex;
flex-wrap:wrap;
column-gap:40px;
}
html .five-two-col-mob .et_pb_column {
width: 50% !important;
} }
/* Disable default two columns on tablet if needed */
@media only screen and (max-width: 767px) and (min-width: 480px) {
html .five-two-col-mob .et_pb_column {
width: 100% !important;
margin-right:0 !important;
} }
Change the width and max width for the text modules if you want to decrease the spacing between the two columns.
Hey, this worked great! The only issue is that it overrides my ‘equalize column height’. Is there a way to have the columns stay at equal heights?
Hi Jessica! Check out the last section (about flexbox), it might help but it’s hard to tell without a link: https://www.w3schools.com/howto/howto_css_equal_height.asp
Hi, How to change a column in Mobile View if we have one column and in this section we add Blog Module in (Grid View).
Can you explain this? Thanks!
Hi Masoom! The Divi blog module is another ballpark. Maybe this tutorial is what you are looking for: https://www.elegantthemes.com/blog/divi-resources/how-to-change-the-number-of-columns-in-the-divi-blog-module#how-to-change-the-number-of-columns-in-the-divi-blog-module-using-css-grid
Hi Victor,
Thanks for the great explanation.
What would be the code for this page: https://smartbiomaterials.nl/members2/
This is one row, one column.
But on desktop (larger than tablet) i want to display it in 4 columns.
On tablet two and on mobile one.
Forgive me for being lazy 😉
Rob
Hi Rob! You don’t need custom code for that. Just add a four column row and it will display two columns in tablet and one column in mobile by default.
Any idea how to fix if I have 5 columns? Does not work correctly
Hi Konstantin! How is it working now and how would you like it to work?