Cool, I'm really glad to hear that! I'm working on a new tutorial on custom Divi row structures (for example 2/3 + 1/3) on mobile devices. Check back in a while and you'll find it here.
Your informative video tutorial saved me a lot of time. I find all of your videos very useful, especially when I've spent many hours designing on the desktop view only to realize that it looks out of order or completely messed up on a tablet or phone. Without your video tutorials, I wouldn't know how to solve most of those issues. Previously, I had to hide images and buttons just to make the design look somewhat okay on mobile devices. But with your help, the end result on tablets and phones now resembles my desktop design much more closely. The CSS codes you provided have been extremely practical and helpful, especially for someone like me with limited coding knowledge who's struggling with layout issues in Divi. Thank you so much for your assistance, and I'm looking forward to seeing more of your informative video tutorials in the future.
Fantastic video! Thank you so much! I not only learned how to add more columns on mobile. I also learned how to apply changes to entire page. So incredible. Thank you!
Sir.. I really want to thank you for helping me out with my project.. I just watched your tutorial and thrilled with what I saw.. you have really solved my problem. Thank you so much.. love from Africa(Nigeria)
Great Video. I have specified 2 for mobile and 4 for tablet and it shows up great in the Divi preview, (so I entered the text correctly where I needed). However, when I go to my actual phone, I am still only seeing one column on my mobile.
Thanks John! This problem is often related to mobile browser cache rendering the old version of the site. How does it lool if you preview the page here ui.dev/amiresponsive ?
Excellent tutorial! Thank you for sharing your knowledge with us. I have a question regarding harmonizing rows: after applying the CSS class "three-col-tab", the row columns in tablet view are not automatically aligning to have the same height, whereas in desktop view, they align automatically. Has anyone else encountered this issue?
@@Victor-Duse I would like to ask you, how to do no space between the columns on tablet and mobile? I have set no space on PC in settings of row, but it doesn't work for mobile and tablet. Thank you a lot!
Hi, i love this. Thank you very much. Is there a way to create same hight coloums with this solution? somehow it does not work with the tablet (and probably the mobile) view.
Hello, thank you very much for this great resource. I have a question. When I work in the theme builder and apply the instructions, nothing changes. These classes appear in the row (.et_pb_row .et_pb_row_0_tb_footer .two-col-mob .et_pb_row_6col). Could it be that it's different for the theme builder? Thank you very much.
It seems like Elegant Themes have changed something in the classes in the Theme Builder since I recorded this tutorial. I updated the code about a week ago here: divimundo.com/en/blog/change-number-of-columns-on-mobile-in-divi/ If it still doesn't work, please share a link and I'll have a look.
Hi there. Quick question. I've been using DIVI for a short period. I see that I have quite a bit of existing CSS (which I've added with the help over the years with the help from the Divi support team). Is there any issues in adding this new CSS? I'm wondering if there's any issues with overlap? Thanks so much for your awesome video!
CSS snippets can conflict so it’s good to have a basic understanding of the code. I always test more complex code on a test website first and add it to the live site afterwards. It’s also good to use a plugin like Duplicator to create a backup before making big changes to the code.
Excellent video! Thank you very much for sharing! I have a question, I have a row with three columns (each column with several modules down). I put the class "two-col-mob" in the row. Now on mobile column 3 is below column 1 and there is an empty space below column 2. Is there a way this can be fixed (remove the empty space and set the modules horizontally)? Cheers!!
Great video! I hoped the info would work for my purposes. I wanted to have two columns on mobile using the filterable portfolio. I added the custom css the theme customizer and added the css class in the row settings. The size of the images changed to two column width BUT there was still only one column. Any help would be greatly appreciated.
H! This tutorial only changes the number of columns in the row (the green box). If you want to change the number of columns in the filterable portfolio module, you can try this tutorial instead: www.elegantthemes.com/blog/divi-resources/how-to-change-the-column-count-in-divis-filterable-portfolio-module
@@Victor-Duse :) thanks for the reply. Would be happy to see any tutorial about page speed optimisation because even tho I tried everyting suggested by elegant themes i still struggle to get my online shop to the greenish line of google page speed insights. Idea for new video. :) keep going
Hi, in the live builder the code seems doing the job but when I go on live from my iphone 14 is not from Safari or Chrome ... Thank you if you can replay
Maybe an old version of the page is cached in your mobile browser? Try to clear both the server cache and the browser cache so see if that works. If not, please share the link and I'll have a look.
Good idea, I have actually planned a tutorial on advanced mobile menus in Divi that will cover long/tall menus. Subscribe to get notified when it comes.
You did the task for same columns size like (1/2,1/2),(1/4,1/4,1/4,1/4)..What will we do when the columns size are (2/3, 1/3) or (2/5,3/5). Kindly let me know...
Hi Mehadi! That's a good question, maybe I'll do a tutorial video on the subject. 🙂 But it's to big of a task to solve it here in the comments. But a hint is that for a 2/3, 1,3 layout you need to use the two column CSS and set 63% width for column 1 and 31,5% width for column 2.
@@mehadijim6349 By the way, if you are in hurry, I can recommend the plugin Divi Toolbox. It lets you build mixed column widths for mobile. Check out the documentation: toolbox.divilover.com/custom-mobile-column-count/ There is discount for the plugin at: divimundo.com/en/divi-toolbox-discount/
I just tested the CSS with the latest versions of WordPress and Divi and it works fine without warnings. Your error message suggests that you are trying to insert HTML into the CSS. Make sure that you don't accidentally copy any of the surrounding text by hovering the code box and clicking the two overlapping squares. That way, you'll copy all the CSS code (and nothing else) with just one click.
Have you checked in frontend, outside of the Theme Customizer? Sometimes, the final layout can not be seen from the Theme Customizer. Also, make sure to clear the browser cache and website cache.
added three columns to my site on a hover image feature, once I added the three column to my mobile version the hover images became distorted and long vertically, any idea how I can fix that?
It doesn't always show in in the visual builder but you should see the changes in frontend. Have you tried to clear your website cache and browser cache?
Hej Viktor , Fantastic. Thank you for a great tutorial. Everything works great exept for woocommerce product module but maybe you have the solution for that also:)
I'm glad you liked it John! This tutorial only shows how you change the number of columns in *Divi rows* (not in modules like the blog module or the product module). If you want to change the number of columns in this WooCommerce product module, you can check out this tutorial: divibooster.com/woocommerce-show-4-products-per-row-in-divi/ Let me know how it goes!
Did you paste the snippet in Divi > Theme Customizer > Additional CSS? If you try to paste it elsewhere, you’ll get an error message. If you click the copy all icon (two squares) you don’t risk to select unwanted characters outside of the css code.
After month of strugglin with tutorial with codes that doesn't work anymore finally one that save me on buying a plugin that probably is out of suppport by now falling for a few of those lately and without any reimbursement either
Sure it does, you can see it work live in the video. Also, I use it on dozens of client websites. Doing it wrong and not woking are two different things.
I was struggling and found this amazing guy there are many tutorials but they are confusing and not well explained. Thank you!
Cool, I'm really glad to hear that! I'm working on a new tutorial on custom Divi row structures (for example 2/3 + 1/3) on mobile devices. Check back in a while and you'll find it here.
Great Video. Normally, advanced level Divi videos are not available but you are doing the great job. Keep it up
👍
Thanks Shakeel! I’m glad you like it. 😀
Your informative video tutorial saved me a lot of time. I find all of your videos very useful, especially when I've spent many hours designing on the desktop view only to realize that it looks out of order or completely messed up on a tablet or phone. Without your video tutorials, I wouldn't know how to solve most of those issues.
Previously, I had to hide images and buttons just to make the design look somewhat okay on mobile devices. But with your help, the end result on tablets and phones now resembles my desktop design much more closely. The CSS codes you provided have been extremely practical and helpful, especially for someone like me with limited coding knowledge who's struggling with layout issues in Divi.
Thank you so much for your assistance, and I'm looking forward to seeing more of your informative video tutorials in the future.
Thanks a lot for your kind words Nick! 🙌 More good stuff is coming up. 🙂
Fantastic video! Thank you so much! I not only learned how to add more columns on mobile. I also learned how to apply changes to entire page. So incredible. Thank you!
That’s awesome Marcia! 🙌 I’m glad you liked it. 🙂
Thanks for the well documented help to change the number of columns for mobile and tablet in DIVI. Works like a charm. 🙂
@@mobilestickers-jc4oe Great, I’m glad to hear that! ☺️
This channel is simply amazing. One of the very best, if not the best, channel related to Divi. Just outstanding.
Wow, thanks James! I'm really glad to hear that. 🙂
Sir.. I really want to thank you for helping me out with my project.. I just watched your tutorial and thrilled with what I saw.. you have really solved my problem. Thank you so much.. love from Africa(Nigeria)
That's awesome! Greetings from the cold north. 🙂
@@Victor-Duse I am a fan and a protege henceforth. #teamDivimundo
Great Video. I have specified 2 for mobile and 4 for tablet and it shows up great in the Divi preview, (so I entered the text correctly where I needed). However, when I go to my actual phone, I am still only seeing one column on my mobile.
Thanks John! This problem is often related to mobile browser cache rendering the old version of the site. How does it lool if you preview the page here ui.dev/amiresponsive ?
Thank you so much this is great,, very useful. I will be following you from now on.
@@IvanRuiz-td4sl I’m glad you liked it! ☺️
Excellent tutorial! Thank you for sharing your knowledge with us. I have a question regarding harmonizing rows: after applying the CSS class "three-col-tab", the row columns in tablet view are not automatically aligning to have the same height, whereas in desktop view, they align automatically. Has anyone else encountered this issue?
I'm glad you liked it! Do you see a difference if you add:
align-items: stretch;
to .three-col-tab?
Thank you very much for this, it was very helpful!
@@victorpaolotabios412 I’m glad you liked it!
Thanks for your help. Wonderful work.
@@valmoreriera I’m glad you liked it! ☺️
Hi, great video. But i am also having the problem where I put in 2 or 3 rows and it goes into one skinny line. Any suggestions?
Hard to tell without taking a look at it. Can you share a link?
Perfect. thank you very much sir.
I’m glad you liked it! 🙂
Thank you and very easy to implement
I’m glad you liked it! ☺️
I never leave comments but you helped me soooo much!! thank you
Awesome, I'm glad to hear that it helped! 🙂
Excellent. Exactly what I was looking for. Nice work, thank you.
Awesome, I’m glad you liked it! ☺️👍
Thank you for you video, it helps me a lot!
I’m glad to hear that! 😊
@@Victor-Duse I would like to ask you, how to do no space between the columns on tablet and mobile? I have set no space on PC in settings of row, but it doesn't work for mobile and tablet. Thank you a lot!
@@janaposikova7778 Just change the column-gap value to 0 in the flexbox CSS.
Very useful video, Thank you so much , please create videos of Divi tips and tricks like this in the future
Thanks Pradeep, I'm glad you liked it! I got more good stuff coming up soon. 🙂
thank you, thank you, thank you! You rock man!
I’m glad you liked it! 😊
Amazing! Works like a charm. Thank you.
I’m glad you liked it! 🙂
Really informative, thank you. Is there a way to build or so that customers can choose the column view they prefer on for example product listings?
I'm glad you liked it! :-) There is probably a plugin for thqt but I haven't tried it myself.
Hi, i love this. Thank you very much. Is there a way to create same hight coloums with this solution? somehow it does not work with the tablet (and probably the mobile) view.
Hi Elea! You could try to add align-items:stretch; to the row.
@@Victor-Duse Thank you, i'll try that.
Hello, thank you very much for this great resource. I have a question. When I work in the theme builder and apply the instructions, nothing changes. These classes appear in the row (.et_pb_row .et_pb_row_0_tb_footer .two-col-mob .et_pb_row_6col). Could it be that it's different for the theme builder? Thank you very much.
It seems like Elegant Themes have changed something in the classes in the Theme Builder since I recorded this tutorial. I updated the code about a week ago here: divimundo.com/en/blog/change-number-of-columns-on-mobile-in-divi/
If it still doesn't work, please share a link and I'll have a look.
Hi! Thank you so much :) @@Victor-Duse
Great way of explaining things! Please keep making videos about Divi!! :) :)
Thanks! ☺️ Will do.
Hi there. Quick question. I've been using DIVI for a short period. I see that I have quite a bit of existing CSS (which I've added with the help over the years with the help from the Divi support team). Is there any issues in adding this new CSS? I'm wondering if there's any issues with overlap? Thanks so much for your awesome video!
CSS snippets can conflict so it’s good to have a basic understanding of the code. I always test more complex code on a test website first and add it to the live site afterwards. It’s also good to use a plugin like Duplicator to create a backup before making big changes to the code.
Excellent video! Thank you very much for sharing!
I have a question, I have a row with three columns (each column with several modules down). I put the class "two-col-mob" in the row. Now on mobile column 3 is below column 1 and there is an empty space below column 2. Is there a way this can be fixed (remove the empty space and set the modules horizontally)? Cheers!!
Thanks Lily! Try this snippet instead:
/* 2 Columns Mobile with 3d column fullwidth */
@media all and (max-width: 767px) {
.two-col-mob .et_pb_column:not(:nth-child(3n)) {
width:47.25% !important;
}
.two-col-mob .et_pb_column:nth-last-child(-n+2) {
margin-bottom:0;
}
.two-col-mob .et_pb_column:not(:nth-child(2n)) {
margin-right:5.5% !important;
}
}
AMAZING! it worked, and really fast
Thanks, I'm glad to hear that! 🙂
Great video! I hoped the info would work for my purposes. I wanted to have two columns on mobile using the filterable portfolio. I added the custom css the theme customizer and added the css class in the row settings. The size of the images changed to two column width BUT there was still only one column. Any help would be greatly appreciated.
H! This tutorial only changes the number of columns in the row (the green box). If you want to change the number of columns in the filterable portfolio module, you can try this tutorial instead: www.elegantthemes.com/blog/divi-resources/how-to-change-the-column-count-in-divis-filterable-portfolio-module
Super duper thanks! (also by the accent I thought that sound so familiar, indeed I was correct on nationality :))
Tack Emil! 🙂
Thanks a lot for this ;)
@@yvesbenini4438 You’re very welcome ☺️
Thanks bro very helpful :)
You’re very welcome Kristiyan 🍻
@@Victor-Duse :) thanks for the reply. Would be happy to see any tutorial about page speed optimisation because even tho I tried everyting suggested by elegant themes i still struggle to get my online shop to the greenish line of google page speed insights. Idea for new video. :) keep going
@@gnkweb Good idea! It’s a bit tricky since much depends on the type of hosting though. Which host do you use?
Great Video.
I’m glad you liked it 😊
excellent as usual, ty!
Thanks, I’m glad you liked it! 🙂
Hi, in the live builder the code seems doing the job but when I go on live from my iphone 14 is not from Safari or Chrome ... Thank you if you can replay
Maybe an old version of the page is cached in your mobile browser? Try to clear both the server cache and the browser cache so see if that works. If not, please share the link and I'll have a look.
Great video, great tescher!
Thanks Vincenzo, I’m glad you liked it 🙂
Can you please create a on video on very long navigation bar in mobile menu. For a long navigation menu, its very difficult to handle it on mobile
Good idea, I have actually planned a tutorial on advanced mobile menus in Divi that will cover long/tall menus. Subscribe to get notified when it comes.
Great. Thanx.
I’m glad you liked it Jiří 🙂
You did the task for same columns size like (1/2,1/2),(1/4,1/4,1/4,1/4)..What will we do when the columns size are (2/3, 1/3) or (2/5,3/5).
Kindly let me know...
Hi Mehadi! That's a good question, maybe I'll do a tutorial video on the subject. 🙂 But it's to big of a task to solve it here in the comments. But a hint is that for a 2/3, 1,3 layout you need to use the two column CSS and set 63% width for column 1 and 31,5% width for column 2.
@@Victor-DuseThank you so much 🌼
@@Victor-DuseHey! Any update about the CSS (2/3,1/3)?.. Please make a tutorial as soon as you can....
@@mehadijim6349 Sorry, I can't give you a date since my topic list for videos is more or less endless, but keep an eye on the channel.
@@mehadijim6349 By the way, if you are in hurry, I can recommend the plugin Divi Toolbox. It lets you build mixed column widths for mobile. Check out the documentation: toolbox.divilover.com/custom-mobile-column-count/
There is discount for the plugin at: divimundo.com/en/divi-toolbox-discount/
Please create a video to make the Divi mobile menu look like the desktop menu
Here's a good tutorial on that subject: ua-cam.com/video/4FnQUNdQYN0/v-deo.html
@@Victor-Duse Please refer me any videos to create divi mobile primary menu to look like desktop primary menu
When I put the CSS CODE, it doesn't let it save, these messages appear:
can break your site?
Markup not allowed in CSS.
I just tested the CSS with the latest versions of WordPress and Divi and it works fine without warnings. Your error message suggests that you are trying to insert HTML into the CSS. Make sure that you don't accidentally copy any of the surrounding text by hovering the code box and clicking the two overlapping squares. That way, you'll copy all the CSS code (and nothing else) with just one click.
It doesn’t seem to work for me. All pasted and done but stays stacked. Aaargh 😢
I can have a look if you share a link.
Hi, this is not working on my website. Please guide what to do?
Hi Sonam! Make sure that you use the latest version of Divi. Also, clear your browser cache, Divi static CSS and cache plugin cache and check again.
It doesn't work on specific catagory pages. Perfectly work on tablet but not mobile how do i solve that?
Have you checked in frontend, outside of the Theme Customizer? Sometimes, the final layout can not be seen from the Theme Customizer. Also, make sure to clear the browser cache and website cache.
added three columns to my site on a hover image feature, once I added the three column to my mobile version the hover images became distorted and long vertically, any idea how I can fix that?
Hard to tell without looking at it. Can you share a link?
Hello, did you ever find a solution? I am having the same issue.
Thank you
You’re very welcome Cecil! 🙂
Nice thanks
You’re welcome Pow! 💥
It's not responding in my side while texting it in css....
It doesn't always show in in the visual builder but you should see the changes in frontend. Have you tried to clear your website cache and browser cache?
Hej Viktor , Fantastic. Thank you for a great tutorial. Everything works great exept for woocommerce product module but maybe you have the solution for that also:)
I'm glad you liked it John! This tutorial only shows how you change the number of columns in *Divi rows* (not in modules like the blog module or the product module). If you want to change the number of columns in this WooCommerce product module, you can check out this tutorial: divibooster.com/woocommerce-show-4-products-per-row-in-divi/
Let me know how it goes!
Gives me an error with the brackets.
Did you paste the snippet in Divi > Theme Customizer > Additional CSS? If you try to paste it elsewhere, you’ll get an error message.
If you click the copy all icon (two squares) you don’t risk to select unwanted characters outside of the css code.
After month of strugglin with tutorial with codes that doesn't work anymore finally one that save me on buying a plugin that probably is out of suppport by now falling for a few of those lately and without any reimbursement either
That’s awesome! I’m working on a new tutorial on more advanced custom mobile columns using grid css. Coming soon… 😎
not working
Sure it does, I just used it with the latest version of Divi and it works fine. You might have some other CSS or plugin that overrides the code.
I think these things should be built in in divi by default. They have already lost the page builder game
I agree but I don’t think the battle is lost. Flexbox (and lots of other well needed features) will be added to Divi after the release of Divi 5.0.
It doesn't work
Sure it does, you can see it work live in the video. Also, I use it on dozens of client websites. Doing it wrong and not woking are two different things.
I type the exact codes in the CSS area but nothing happens, do you know why?@@Victor-Duse