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. 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 ?
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)
@@DiviMundo 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!
@@DiviMundo :) 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.
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.
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.
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.
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
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.
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?
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.
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!
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/
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.
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?
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.
