How to Keep Columns on Mobile in Divi

hey everybody its Josh here in this tutorial I'm gonna show you how to keep columns on mobile in Divi so what I mean by this is when you're working with Divi and you have a row with multiple columns so for example this row has three columns and there's three images here when you look at this on tablet and mobile generally these elements are going to stack on each other so if I take a peek at the tablet version of this you can see right there all of these columns start stacking on each other and then same thing for mobile as well now that's generally fine however there's a lot of circumstances I find myself in to where it would be really nice to be able to just have these elements next to each other even on mobile so for example these three logos can totally be smaller and can be next to each other on mobile one reason I like doing this is because if you have a lot of elements on your page if everything is stacked on top of each other on mobile and tablet it can make for a lot of scrolling so anywhere I can I like to try to stack elements next to each other on mobile and that's what we're gonna do in this tutorial so what I'm going to do is I'm gonna show you how to create this look to where we have the same thing but check this out we look at on tablet there we go they're right next to each other and then same thing on mobile the logos remain right next to each other across all devices so practically here's an example of a site that I built that has this effect to wear this home inspector has like 12 main services and I did not want all of these stacking on top of each other on mobile because that would be a lot of scrolling just through the services section so you'll see here once we get to the break point of tablet everything goes to three rows right like that so that way again they're not stacking one-by-one on tablet and mobile so that's the look we're gonna come up with now I do want to say we're just gonna add a little bit of CSS to be able to pull this off which is why I think it's so important to know at least the basics of CSS and this is why I created a whole course on Divi and CSS so I just wanted to say that if you liked this tutorial and you find yourself wanting to learn CSS better be sure to click the link below and you'll get 10% off my Divi CSS course so with that said let's go ahead and dive in and start having some fun so first things first we need to add a class where we're gonna put our CSS and this is where there are a lot of different options because you could customize the CSS inside each module you could mess with the row or the whole section in itself what I found best in this case is to add a class in the row and then the class that we add we're going to be able to add custom CSS to which is going to affect every column and every element in that row so that's what we're gonna do we're gonna go into the row settings go to advanced to go to class ID and classes or CSS ID in classes and then we're going to add a class here and now I'm gonna call this three columns you can call this anything you want now I've found that like previously I used to do things like three call or three dash call but I found that a lot of plugins I was using had the same type of classes and they were conflicting so it's best when you do a custom class like this to try to do something unique and I found spelling it out seems to work the best so we're gonna call this three columns and we're gonna roll with this let's go ahead and save that now from here is we're gonna start adding some CSS and start having some fun ideally you would put your CSS in your child theme stylesheet but in this case I'm just gonna go up to my theme customizer and we're gonna put our CSS here and this way we can see it live as well I do have a tutorial on where to put your CSS so I'll link to that below but again we're just going to go ahead and put our CSS in here for now so let's go down to our section here we know that our class is added and we're ready to start having some fun so first things first let's add that class three columns and let's set our brackets all right now one very important step before we get to customizing this for tablet and mobile and we're gonna use inspect element for this is that we need to target each one of the elements in this row that's under this class so let's go ahead and look at a little more detail at one of these elements and you can see that right here I've got the whole column selected if I go down here that this column has a class of et P be column so this is what we're going to use so those of you who have been through my CSS course know that you can merge two column or two classes together which is super super handy so check this out I'm going to take this class and you can see by selecting that it selected all the columns here and I'm gonna put this right after with a space right after my class that I set up which basically is saying this any column that is under the class of three columns will have these effects so that's the way we can target just these columns without messing up anything on the page so with that in mind let's go down here to see where it breaks and about there so what I want to do is with that selected there I want to adjust first off the width now if I go with let's see we want to do rows are three so we need to take a hundred and divide that by three and for right now let's just call this thirty three percent you can see automatically it's going to work just like that we didn't have to touch anything else all we had to do was just adjust the width which says hey all these columns within that class I want you to bounce that down to thirty three percent now let's scroll in a little bit further okay now that looks really good on tablet and if we scroll in let's see because I think we need to add perhaps important to make sure this works on mobile so sure enough yep you can see right there there's still some mobile settings that are overriding that so what I want to do is add an important tag after this to say hey no matter where we are no matter what screen size we want this to be 33 percent and there we go looking good so it's that easy to actually technically create this now the only thing about this that we've done to this point is check this out let me exit out of inspect element when I drag this out to desktop you'll see that things get a little bit dicey right about there because we're working with these elements and we've kind of assigned some widths that are adjusting it on desktop as well so what I recommend doing is adding a media query oops let me open them up add a media query which is going to say hey only make this only only activate this look on tablet and mobile so what we're gonna do is add a media query which will look something like this we'll do media only screen and and we'll call this max width so we only want this to go max width of 980 which is the break point for most tablets so we'll go 980 pixels and then we need to add our brackets and then we're gonna throw the CSS inside the brackets there and there we go so now check that out we've got our 50 little trick there that looks great I'll desktop it's gonna look good on tablet and it's gonna look really good on mobile as well and we'll go ahead and we'll just I'll tell you what let's back out of the theme customizer here let's publish this and you can see it's only one line of actual CSS we again in short we targeted the we set up a class and we said hey all the columns inside that class only have a with a 33% and we put this under our media query that is gonna say hey anything that goes up to 980 pixels or it's gonna have that look on mobile for this section so again let's go ahead and just take a peek at this let's just make sure everything's looking good there's tablet looking good and there is mobile looking great as well now if you want to do different widths very easy to do all you have to do is adjust the the actual percentage so let's back out of the visual builder here just to make this a little easier cuz we're gonna use inspect element so let's right click inspect element so again let's say on desks on mobile you didn't want to have at 30% maybe you wanted it to be 50% like you wanted rows up to what I can do is find that class there and there's our three columns class and actually I think I'll need to zoom into tablet view to be able to see that because it was hidden and there we go you can see right there we found that class so let's say on tablet I wanted it to be rows of two all I have to do is adjust it to 50% and then now it's rows of two and you can adjust this as well you could do different media queries to say that hey I only want this to be three rows on tablet but then I want it to be two rows on mobile so for example I tell you what I don't want to leave you hanging here let's do that real quick let's go into our theme customizer and we're gonna replicate what we just set up and we're gonna say that with this class of three columns it's gonna be three columns on tablet but then two columns on mobile and this is where adjusting the name of the class might be better like you might put responsive columns as a class or something so I'm gonna do 479 which is the breakpoint for mobile and we're gonna do 50% now let's publish this and one last time my friends let's look at this out on the website and we go here so we should see this stay three on tablet there we go and then now we should see it break 2 2 on mobile there's mobile right there so I just had to look at the mobile view but check that out pretty cool right I mean just a little bit of CSS and we've got this look that can really help take our div easy maybe designs to the next level now what I am going to do in the actual post is I'm going to include all the percentages for two rows three rows and four rows so all you have to do is add a class to the row and then every element you put in here is going to a line just like that perfectly so again if I were to last thing I'll do here is just duplicate this so let's say I had more columns to add all I need to do is I can bring more columns in there or I can just duplicate this row and this is gonna retain just like that and then same thing on mobile it's gonna have that same effect on mobile all would that class that we added so super super handy really really cool trick I use this all the time across a lot of different sites so check out again the the notes below which will have the code for this if you're looking to get more involved with CSS don't miss out on the code below so you can get 10% off my Divi CSS course and I hope this tutorial helps you guys out and helps you make some awesome Divi website designs alright guys see you on the next tutorial [Music]

Channel: Josh Hall

Views: 74,275

Keywords: Josh Hall, Divi, JoshHall.co, Josh Hall Divi, Elegant Themes, Elegant Themes Divi, Divi Tutorial, Divi Tutorials, Web Design Tutorials, Web Design, Divi Columns on Mobile, Keep Columns Mobile Divi

Id: oFJPKXls_2Y

Length: 11min 19sec (679 seconds)

Published: Sun Feb 03 2019