How To Resize Divi Column Widths To Any Size

hey everyone it's Nelson Miller here again with PA creator today I'm excited to show you how to control and resize the width of your Divi columns so what we're gonna show you is how to you know change the column sizes to you know a little bit wider a little bit narrower and this is gonna allow so many new layout possibilities and I'm gonna show you an example how I'm using that on my personal website and I think it's gonna really inspire you to use this trick to resize your Divi columns alright well let's get started alright so you may be wondering you know what why would we need to resize columns in the first place because Debbie does give us a nice selection of column layouts especially you know over the past couple years when they've had some updates you know that there's a decent amount of columns here and especially if we start looking over at you know specialty sections and things like that but the reason this came up a couple people were talking about it in a facebook thread and I started thinking about wow you know it would be great if there was some kind of option you know in here and Divi you know maybe maybe in the columns here or even if you could just go here and like slide these left and right something like that so it really started me thinking and a really good use case for why this would be necessary is over on my personal blog so take a look at my header here and when I was creating this you know I built this with the theme builder so I I wanted to have the logo over here separate from my menu okay so I wanted that I didn't want to use you know the menu module I didn't want it to be over here I wanted it to be just how it looks right now but that was just not possible with any of the column layouts over here you can see I have a button and then here's like the social follow module so okay a button module follow module menu module and image module but you can see that this is not like any a predefined column layout and in fact I'm gonna get to this a little bit later but in fact I think this is like one tenth and this is like 65% and these might be like 15% each something like that but this is just an example of why this resizing columns is necessary I wanted to get that over with first that you could kind of be like okay what are we doing here but let's get to this so in order to properly resize our columns I'm gonna have to make the row full width because we're gonna be using percentages so you can imagine if I say I want this column to be 25% well if it's not 100% wide this whole column then 25% is 25% of what so the first thing to do is go in here to sizing turn on custom gutter width let's put that down all right and if you wanted to base in here we could add you know margins and padding's but the gutter with has to be down turn that on with we're gonna make this 100% okay and then the max width is overriding that so we need to make that 100% as well all right so there's our column so now if I would say okay I want this one I mean they are 25% they're at 1/4 but if I want to change the percentage now it's based on 100% okay so I've set this to quarter quarter quarter quarter and we're gonna actually go in here and we recreate what I've done here with resizing the columns and I'm going to show you how simple that is so go in here to your row first of all and inside the row is where all the columns are so let's go to column one go to the Advanced tab custom CSS and the main element here now I should point out now that there's gonna be this responsive toggle that you can use all right so you you might only want this to be a certain width on desktop a little different on tablet and probably certainly differ on phone you might want it to go from some width here on desktop to 100% on phone something like that so please keep that in mind I'm only going to show you desktop for now but you know that's something you're gonna have to keep in mind all right so let's go ahead and add the width that we want here for column 1 I'm gonna paste 10% so you may have noticed a problem not really a problem but notice that this here got shorter Wow that's because we have 25 25 25 10 well that doesn't equal 100 so we're left over with you know some percentage over here and it's just gonna get wacky so we need to make sure that when we're resizing columns at it that they always together equal 100 percent okay so I've done 10 I have 90 percent to work with all right that's probably the biggest thing you're gonna have to remember so I just know from doing my website that I want this to be 65 okay I want come to to be 65 I know it's crazy but that's how I want that's where I want my menu so then I'll go over here to column 3 go to the Advanced tab custom CSS and who knows I could be all for my math but I think I think I need another 15 and another 15 should have copied that other one in the guy so all I was doing was putting with a percentage and important and again you know you're gonna want to change this for mobile and tablet but that's how easy that was one line of CSS within Divi you don't have to use media queries you don't have to add a bunch of classes to all your columns and things like that to be honest there are some older tutorials out there that are like super complicated and I pity people especially beacon who are trying to do these tutorials but this one is I hope that I'm explaining this well you just go into each column and go to the Advanced tab custom CSS and the main element and you put in your width and make sure that those widths equal 100% and that right there is how you resize columns and Divi hi nice so if you like that kind of thing this is what we've been producing a lot I know I say it a lot but if you're subscribed you're gonna get notified and you're not gonna get spammed you're gonna get stuff like this all the time so we are pretty much we're Divya exclusive so occasionally there could be you know some kind of different web design or word wordpress related thing or maybe an occasional update from some of our adventures that my wife and I have but other than that you're getting to be content if you subscribe here or over on the blog alright well we'll see you in the next video [Music]

Channel: Pee-Aye Creative

Views: 45,028

Keywords: Divi Theme Builder, Divi 4.0, Divi 4, Divi, Divi Builder, Divi Theme, Elegant Themes, WordPress, Divi hack, Divi tutorial, Divi CSS, Divi Website, Divi feature, Divi update, Divi how to, resize Divi columns, resize columns in Divi, Divi columns, divi column width, draggable columns Divi, change divi columns, make columns wider Divi, stretch Divi columns

Id: 3WOvhnlogWQ

Length: 7min 58sec (478 seconds)

Published: Fri Dec 13 2019