14. Setting the columns widths - Responsive CSS Tutorial

Key Takeaways

all right so let's fix the wits on our columns here to get them to be the sizes that we want them to be so if you remember I said that I'm gonna use a modifier class once again now you don't have to necessarily use a modifier class but we're going to get really used to using modifier classes so I want you to sort of get in that mindset now the original way I was gonna look at it was we can use our doc call which would be this would just be one width and we could have it call two and a call three but I'm gonna set up the same idea but I'm have a call one call to call three and there could technically I guess be a call for that would stretch the whole width now I am gonna keep this slow I didn't keep this slide here though before I thought of that because I did want to look at the idea of why I'm calling it call two and why I'm calling it column three and the way I'm looking at it is this is a four column layout I have if I divided this into equal spaces I'd have four if I took the smallest column I could have four of them across the entire width of this layout so it's a four column layout this one is double the width of this one and this is three times the width of my sort of default or my smallest column here so I have my column two which is going to be double the size and this one which is gonna be triple the size so what I want you to do is if you didn't do it on the last video when I said you have a chance because you weren't really sure what to do try giving it a go now that I've explained a little bit more and then I'm gonna look at sort of the trickiest thing was how do you decide exactly how big they should be all right so I hope you got it so what I'm gonna do now is I'm gonna come over here and I'm going to come in actually to my index here first and we have to add those class columns to here so this is a column and it's gonna have the width of a column one then I'm going to have this one have the column two and this one is also going to be a column one down here I'm gonna have a column three and this last one will be a column one so if I come over to my Styles now and I come and create some styles for those so we're gonna have a call one a Col two and a call three and what unit do you think would make the most sense for setting the sizes on these like if you were gonna do what's the easiest way you could decide the width that one of these would be you know pixels would be a nightmare just because you don't how many pixels big should it be the screens always changing and then well then it's not gonna work at all the screen sizes MS and REMS same deal it just it's not going to function this is where percentage really come into play so my call one I can give this a whiff the question is how big do I make it well I just said when we were looking at that last slide we're gonna divide this up into four so if I made this 25% then I know that this one should be a width of 50% and I know that this one here should be a width of 75% so let's come and look and see how that worked on my layout and look at that everything is lining up this is a call one and this is a call one so now they're actually the same size as one another they're working out the way we'd wanted them to work out before they're matching each other that's that's perfect right before this was bigger but it was a lot bigger now everything is lining up with one another the only problem we have now is there's no space between our columns and there's a lot of different ways we can approach this lack of space a lot of popular ways are using margins and padding to create space but then this first column needs a different style because you can't have any margin on the left or this one needs a different style because it can't have anything on the right side and then you know the same thing here you start getting into a little bit of issues or problems with it and luckily flexbox actually has a really good way to solve this I'm gonna see that solution in the next video