But as you can imagine, it takes a lot of time and effort to put these together. Thank you very much Josh! loved the ease of display:flex however is it possible to make it only apply to tablets rather than mobile? Hey! Allen currently serves as Ezoic’s head of content and works directly with publishers and industry partners to bring emerging news and stories to Ezoic publishers. In this tutorial, I show you how to Keep Columns on Mobile in Divi. Subscribe To Our Youtube Channel On a new page, click to use the Divi Builder and launch the Visual Builder. As always, great tutorial, Josh! Once in Divi > Theme options, scroll down to the ‘Custom CSS” section. From the visual builder, choose a 2 column (½ – ½) layout. What if I want 4 columns on the computer, but then for mobile want them to become a 2×2 grid instead of 4 in a row or stacked columns. 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) If you are trying to have four or more columns side-by-side on mobile, jump to that section now. I needed this a long time ago! Note that you’ll get a warning using width with padding. Use coupon code "CSS10" for 10% OFF my Divi/CSS Course! “blurb-three-columns”. I do have a couple of questions. padding: 0 10px; Hi. Then in your stylesheet, add “display: inline-block” to above class (using @media query targeting tablets). Do you have any questions about this tutorial? Your email address will not be published. thanks so much for your article! This is something that has been bugging me for a while now. @media only screen and (max-width: 980px) {.five-columns .et_pb_column {width: 20%!important;}}. Thanks, Kheti! For example: four-columns. Control Mobile Stacking – Almost Inevitable PK Son, How to Change Divi Column Stacking Order – Elegant Themes. But one thing: The Extra theme doesn’t need the Divi Builder plugin, it has the builder built in, just like Divi does. You must divide the number of columns by 100. I found it very helpful. Hello Josh, this is great, thanks You can also use the “customize” section of your theme to edit on the front end as well. Perfect! I'd love to do more. When you put the CSS in, make sure to clear cache and refresh browser!! Go to the Row Settings>Advanced Tab>Custom CSS toggle. Your email address will not be published. I offer exclusive discounts and deals to my email list and promise not to abuse the privilege to email you directly. If you have 3 or fewer columns to keep side-by-side, the display:flex; code in the custom CSS section of your row settings is the easiest way to get the desired result. That was exciting, however, the images are on almost on top of each other. Thank you for this. Allen is a published author and accomplished digital marketer. You have to follow this pattern for however many columns you’re trying to have side-by-side. Yep you can adjust the percentages accordingly! Add an image module to the first column inside your row. Instead, they appear stacked. (I’m using a 770 x 433 image from unsplash.com) Next, insert a text module in the second column of your row. This piece of CSS code is by far the easiest way to make 2-3 elements appear side-by-side on mobile and tablet devices. The first to do is to add some CSS to the Divi row settings. Love your videos, and the way you explain things. You are the best, Josh – My Master Game Changer! If interested be sure to use the promo code that I have out now, CSS30 for $30 OFF! Important: This code only works for 3 or fewer elements. That section has been disabled on desktop. 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. How can I add a bit more space in between them and still keep them in a three-column row on mobile? You’re right – it is a big problem that can be very annoying. Once this simple step is completed, you will already be half way to controlling your Divi column stacking order on mobile. Remember: You must change the “width” percentage section for every new column you add. In the “advanced” tab, open the CSS ID & Classes drop-down tab. Just special deals, important announcements and a notification when a new tutorial or video goes live! What is this code doing? 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. I know almost everyone hates doing that. Here are some example CSS class and code options you can use for any row moving forward!\. This effect can be used in a number of different ways on a Divi website. Add the css only tor tablet. Under Image Settings, upload and insert an image. When on smaller screens, the images end up touching each other and I’d ideally like the gap between them. I tried this but it didn’t work. The Divi Builder gives users a complete design framework that is easy-to-use. Instead, adjust each blurb’s width settings: desktop: auto width; 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. I’ll let you know when my next tutorial, podcast or post drops and promise not to bombard you with spammy emails. I can’t wait to use this on my site, thanks Josh! tablet: 32% width; Ah, you could add some padding in the media queries for mobile! Additionally, we have another Divi tutorial blog on how to fix mobile heading fonts. The @media only screen and (max-width: 980px) is dictating that when the viewport is less than 980 pixels, to display the 4 columns side-by-side and not stacked. Can you do something similar when your columns are different widths? You’d just need to adjust the media query size to a different breakpoint. Hi Josh Required fields are marked *. mobile: 100% width. Hey Atif, this should work regardless if the Theme Builder is on or off. 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. You could probably use the Divi Builder plugin in Extra and use this method though. Required fields are marked *. The author of two separate novels, Allen is a developing marketer with a deep understanding of the online publishing landscape. box-sizing: border-box; width: 33.33% !important; mmm yeah honestly I don’t use Extra and am not familiar with the little differences. 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! Oh, and you’ll also get my latest e-book on Although sometimes, optimization errors exist between desktop and mobile versions of pages on the site. 2. Easy peasy. Under the General Text Settings, add your text to the Content text box. Images, text boxes, icons, blurbs and more! 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. In the “CSS Class” section of your row settings, name the class with however many columns you desire. otherwise i tried using two-columns and editing code to (min-with: 780px) and (max-width: 980px) for the size, but it doesnt seem to work at all. Click on the “Custom CSS” drop-down to open it. Greetings from Barcelona, (Catalonia). As in, 3 side by side would work fine, but adding a 4th would break the code. Your email address will not be published. I found myself in a scenario where there’s 2 columns in a row. Oh and you’ll also get my latest eBook! If you have more than 4, 5, or 6 icons/images or more, you can repeat use the same code as above. Its for mobile and tablet view only. Steps to stop your columns from breaking in Divi on mobile: And that’s it! Great tutorial. It’s also a great way to reduce the amount of scrolling on mobile as well! I implemented it on a Divi site and can only get the layout to work on landscape orientation and not portrait. Add the display: flex; code to the “main element” section of your custom CSS. I’ll definitely be using this with my clients. @media only screen and (max-width: 980px) {.four-columns .et_pb_column {width: 25%!important;}}. Let me know in the comments. If so, I have a promo going on for $30 OFF. Any ideas? You’ve solved a big and annoying problem. If you'd like to leave a tip and show your appreciation, it would show me that the time I invest in these is worth it and will help keep more coming! You should be able to add some “padding” between each of the elements when they are stacked on top of each other (using the Divi advanced settings). The 3-column display:flex doesn’t work for me, and the 4-column CSS styling doesn’t really apply either. In order for me to do these, I need to take time away from my business which is what's currently paying the bills. Thanks so much for taking the time to share the value! Join my Divi Web Designers Facebook group to get free support and to be automatically plugged into an awesome, supportive community of fellow Divi/WordPress web designers! Any thing I may be missing from a 5 column perspective? Great post! Currently, I’m not sure how to do a 2×2 grid instead of all stacked on top of each other. And again, you can add this to all kinds of elements in Divi. You can use code CSS30 at checkout if interested! Join my mailing list and get exclusive discounts to my courses, layouts & more. HiWhat would I do, if I have 4 columns, but I only want the middle two columns to sit side-by-side, while Columns 1 and 4 are above and below that? Now your blurbs should stack 3 across on tablets only and not affect other columns in the row. Go to your row settings of the row that has 4+ “stacked” columns. Make sure you update the bolded sections of the code above as well in the custom CSS in your theme options in Divi. Save Now you should have one row with 2 columns with … No spam. It worked on my column with 3 images. We recently discovered that it’s difficult to keep columns side-by-side on mobile. Not sure how much CSS you know but my CSS Course will really help you level up with all of that! Josh, this is absolutely brilliant! 1. Any idea how i can get this to work with the theme builder? Thanks for sharing. Although sometimes, optimization errors exist between desktop and mobile versions of pages on the site. Whatever you'd like to tip is much appreciated! Like having two columns were one is 25% and the other is 75%; and then have them shrink instead of collapsing? We recently discovered that it’s difficult to keep columns side-by-side on mobile. Hi thanks for such a good tutorial I have used three-column bu the thing is I want to show three coloumn on desktop and two on mobile layout any idea how to do it. The above CSS is not useful in that scenario. 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. You made it SO SIMPLE! 075 – The Ins & Outs of Running A Website Maintenance Plan with Stephanie Hudson, 074 – Staying Power > Starting Power (10 tips for building longevity), Best Divi Facebook Groups to Join in 2020, 5 Ways Divi Changed my Business (and Life), Add a class to the row > advanced CSS section (like “three-columns), Add the class to your stylesheet or custom CSS area, 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).