3 CSS Units. Percentage - Responsive CSS Tutorial

Key Takeaways

so we're gonna start with percentages instead of em in RAM just because it's much easier to understand how they work so if we look at a layout like this and we will be making this layout in the next module of the course once we've learned how to think responsibly cuz we're going to make it responsive we're gonna make this work on small screens up to big screens and that's gonna be our project in the next one but for now just looking at this and thinking about it with what we know at the moment I would have a set width on the total size of this so say I say the entire document here is 960 pixels so I set a width I put a container on the whole thing or something and they say width 960 pixels so that's fine and this is a common size we used to use in the really really old days and then I have the two parts here so I need to define an individual width for the left and the right side so I might say well I want that left side to be about 70% of that so I need to calculate what that is so I do 960 times point seven and that would give me six hundred and seventy-two pixels so now I know the width and it's at the width of six hundred and seventy two pixels for my left side but then there's also the other side and I have to find out the fixed pixel value for that side and well then I also have padding in there so then I'd have to start subtracting padding and doing all this oh it's annoying right you don't want to have to start thinking about all of these things and this is for a fixed width imagine now you're trying to bring all those numbers into it for you're trying to like adjust it for different screen sizes so instead of complicating matters when we think responsively we want to simplify matters a big part of thinking responsively and I sorry if I ever say respond responsibly they're so similar so if we when we started to think responsively it's all about trying to simplify and out complicate matters so you remember this layout we just finished it but let's say we wanted to turn this into a more responsive layout instead of the fixed layout like we have now we can do that so let's go and take a look at how we can do it um and you can probably guess the one thing that we really need to change is this fix container with because right now it has a width of 620 pixels so we have a set width on that container I'm also going to turn at this border back on just so we can really visualize what's happening while we're playing with this so I'm gonna save that for the moment we're going to come and take a look at it and you can see when I play with the screen size were set at 620 pixels so it's working at big screens but if we go smaller all of a sudden I run into this problem where I have side scrolling so I get a scroll bar to go left and right because my screen is too small for the content that's in there my content is wider than my viewport width and that causes the side scrolling issue so if I was gonna open this page on a cell phone that would it just wouldn't work right I would get this issue I wouldn't be able to see it I get this weird problem there that I'm not even going to worry about right now um it just does not look good so how can we fix it as I mentioned we want to change this from a set width to a percentage so what I want you to do right now is change this over to a percentage it has to be 100% or less and I would go with less than 100% it would defeat the purpose of the container if not try different sizes see what they look like play around with the screen size in the player here and then once you're happy and you sort of see what's going on I'm gonna dive in and we'll look into it in a little bit more detail great so I'm you know it's pretty evident let's say I do 50% on this I think it's obvious what's gonna happen is those containers are now 50 percent of the total screen size you might have got a little surprise with your image sticking off the side and we'll get to that in a little bit but we can see with the container now as I grow or shrink my screen that container is adjusting itself automatically which is pretty cool I think because we know the containers width is set to 50 percent I know I have 25 percent on the left there and 25 percent on the right left over so that's pretty cool that I can sort of make this container that adapts to my screen size now the problem is my image so before we see how we can actually fix that thing that's going on with the image and understanding that what I really want you to understand is what is this 50% of so if my container is 50% it's always going to be 50% of its parent so we have a few different containers here as we can see this container here is 50% of section 1 this one is 50% of my header and this one is 50% of section 2 now my header my section 1 and my section 2 don't have widths on them and block level elements by default have a width of 100% so section 1 section 2 and my header are all 100% of my screen size so that just means that my container ends up being 50% of my screen size now what would happen if I came and set a width of 500 pixels on my header can you take a guess before you come and look at what's actually happening on the page what do you think has happened to the container that was inside my header so let's go and take a look at it and you can see that I've limited my header to 500 pixels and this container is 50% of that 500 so I get 25% there 50% here and then another 25% there so this container is now smaller than this container on this side because each one is only looking at its parent and it's not looking at anything else now normally I'm not gonna have a set width on something because that makes that whole thing look pretty ugly so we're gonna get rid of that and go back and take a look at it and then we go we fix that so just remember always when you're using a percentage if that percentage is always relative to its parent but a lot of the time the parent is defaulting to a hundred percent we're gonna run into situations where maybe that's a little bit different even if you feel a little bit confused right now in the long run it does actually make our lives much much much easier I'm gonna leave this video for here so you can play around with it a little bit make sure you really understand how that's working if you're a little bit unclear try playing with the width of your header of your section one in your section two to really see how this affects it and then maybe even play around with this width as a percentage just to really make sure it's clear and then once you've figured that out in the next video we're gonna look at how we can fix that problem that's going on with the image