 Hi there, my friend and friends. One of the biggest pain points that I hear about when it comes to making websites is making them responsive. So today we're going to look at how a simple shift in how you approach writing your CSS can make things so much easier on that front. Because here at my channel, everything I do is to help people fall in love with CSS and if I can't get you to fall in love with it, hopefully I can at least help you be a little bit less frustrated by it. And to do that, one of the main things I want to focus on in this video is not looking at how you can do the same layout as I'm making now, but cover concepts that you can sort of put into every one of your projects that you're working on. And so we're going to be starting with this. I do have some CSS already written just to sort of style things up. Don't be intimidated by the custom properties and stuff if you're new and you don't know what that is. Basically though, nothing is applying to the layout itself right now. I just have, you know, to make things not completely ugly. But that does bring me to sort of my first point actually is right now I haven't really done any layout stuff. I've just done some sort of general styling and you can see things are here and it does not look fantastic by any means. There's a lot of weird stuff going on, but I actually have a responsive website right now. So if I come in here and I do an inspect and I'm going to do my little responsive mode, which is here in Chrome. It's on the other side in Firefox. And when I do that, my website is basically responsive. There's a bit of a problem and it's being caused by my images. You can see it's growing and shrinking and stuff is going on with it. And that's like if I come here and I actually remove all of my CSS and there's nothing in there. I just commented out. I select all control forward slash and it comments out whatever is selected and it's still responsive. Now I have this image that's overflowing, which is sort of what's causing things to shrink down a little bit because images are that one thing that sort of can actually cause problems. So that's often, you know, you'll see CSS resets and things like that where you'll have your image and then a display block and max width 100%. And the reason that we do that is because then my image will adapt to the screen instead of it being this really big thing that sort of shoots out the side. So now you can see that it's adapting as I'm doing that and I have an ugly website, but at least it's working on all screen sizes with basically one line here. If you have large SVGs, picture elements, other things, you might have to add a few other things to the selector, but generally that's sort of the baseline of what we want to do. And that does mean that whenever you do run into issues with responsiveness, it means you wrote some CSS that caused it. And that sucks to hear, but it's not CSS's fault when that happens, right? It's our own fault and often a misunderstanding of CSS and sort of how we should be working with it. So I'm just going to turn my other colors back on so we're in a dark mode and stuff. It's a bit less bright for all of us and we can keep on going. And we have some nicer fonts set up basically for now. I'm going to turn off that responsive mode as well. So we'll sort of turn it on and off as we need it. And as we go through this and the next thing that I want you to think about because there when I was because then there where I was adapting the screen size, what was happening is everything was sort of just adapting on its own, right? So let's actually come and I have a if we look at my HTML all the way at the top up here. I have I have a header here that has some content in it. So let's go and grab that header for a second here. And you can see under my head now, let's get myself out of the way. You can see we have a background color on there. Just so we can see what we're working with. And I'm going to throw a responsive mode on here again because what I want you to look at is as this is getting narrower, you can see it's getting taller at the same time, right? So as this gets bigger and smaller as the width gets narrower, the height has to increase because my content is changing in size. And this is a really important thing to understand about how any websites have to work and how the defaults work within the browser. Because what's happening is because what's the most important thing here is this content needs a certain area to work. So we're sort of looking at the width times the height. So as one is getting smaller, the other one has to get bigger and as you know, the height can decrease and increase in width. We need to maintain that area so we don't run into any overflowing issues. So if I have a header like this and I do want to set like a size for it, I don't want to come and say that I have a height. Because if I say height here, height of say 500 pixels and I hit save. And actually my image is in there. So let's just go and turn off the image because we're not going to see this as clearly right now. So I'm just going to comment that out for the time being and or let's come in with 600 now and you can see that it's I have 600 pixels, which is fine. But then as we get narrower and narrower at one point, this is actually spilling out the bottom and I'm losing content and it's going behind this next image that we have there. And then of course, as I come this way, now I have that space that's available to me. And this is a problem because people like for whatever reason, they like setting specific heights and it might be because you're following a design or you have something else. That you need to follow and you're sort of working at it at your desktop screen sizes and everything's fine. And then you get to a smaller size and things overflow and then you're like, oh, I need a media query or I need something else. You don't need that. We want to keep as much of those default behaviors as possible from the browser. So instead of setting things like widths and heights and there's exceptions to these, but if I'm talking more about overall layouts, you don't want to set a height. Maybe what you need is a minimum height. So if I set a minimum height and let's make this back to the 600 that we had before, it's going to be 600 pixels tall because that's the smallest it's allowed to get to. But if this content needs more space because we're getting narrower and narrower, so we need more and more height at one point, it hits that spot and it's allowed to grow. And you can see it's just getting taller and taller and taller because we're saying that's the minimum size it's allowed to be. And we can often do this with maximum widths as well. And there's a really common place you'll see that. I have set up a class of wrapper here. And so it's really common that on something like a wrapper or this is, you know, you might see it as a container, is a common name for this type of thing as well, where you get a max width on it, right? So I could say max width is 960 pixels or whatever I need it to be. And then when I get to that 960 pixels and you can see here it's stopped growing. It's getting to 960 and it's never getting any bigger than that, but it's allowed to shrink. And I see some people approaching wrappers where they're going to build multiple break points for it with media queries. So they're going to say that the width is 960 at a certain break point and then they get to another break point and then another break point. But the problem with that is sometimes you need to make changes to it. You have the same element that has like six different widths and you have to find the one that you want to change. And again, you might be following sort of a Figma file or a design file that you have. You only have four versions or three versions or two versions or whatever it is that the designers actually made for the different screen sizes. So you don't always know exactly and you're just following what you have there, but it just makes it so much easier to say that it's a max width instead of an actual width. And then the advantage with that is you can come in and you can say that it has a margin inline, which is a shorthand for the left and the right. It's a little bit different because it's a logical property. So if ever you had a vertical writing mode, it would change, but the inline axis in most of work you're going to be doing will be left to right unless you're doing something in a language that would be a vertical writing mode instead, but we have our margin inline. I can do auto and then it centers it, right? Margin left auto, margin right auto and it centers that on the screen and then we get this thing that's very adaptive because we're saying a maximum width. You cannot get bigger than that, but we want to allow it to shrink because if not you have overflows and then you have that opposite approach for your header here because with heights, you definitely want the opposite widths. You tend to do max widths heights. You tend to do min heights. That's a very safe approach to doing things. Now, let's say I was doing this guy because this is like an about the author that has a little blurb about the author that's somewhere where I might actually make a difference. If I come and take a look at that just because this is sort of like the avatar that might be something where I just set a width of 100 pixels and that's it because that's just how big my avatar is for small little elements where they're not going to cause overflow and you have a specific size. That's completely fine though sometimes just still putting a max width on there could be handy because if it gets into certain situations, you might need it to shrink anyway, but setting a width on small elements little icon stuff like that is completely fine. But when you're going and you're trying to do lay out wide stuff, I would really recommend as much as possible, at least having this as your starting point and how you're going to start doing things to prevent problems from happening. Another thing that's super, super important is also don't declare stuff that you don't need. Okay, especially with your widths and your heights because this is a problem I see all the time. I have a discord community where people can ask questions and get help on stuff and a lot of the time they have these little overflow issues or these little problems and it's caused by declaring stuff they don't need. An example of that is coming on your body and saying that this has a width 100 VW and a height 100 VH because people love viewport units and if I do that though, if you take a look at this and all the way down at the bottom here, I actually have a horizontal scroll now because on at least on Windows in Chrome, we have these fixed scroll bars that come in like this one and when we have that the VW doesn't account for the scroll bar. It's looking at the whole width including the space underneath the scroll bar and so when you do that, you get these little things like this and it's really, really frustrating. So my width on my body and let's just highlight this. I'm going to come here and put a border of like 10 pixels solid red just so we can see it. You can see there's my body and you can see and I have a height 100 VW which is why it's stopping there and everything's overflowing. But you can see like it's bigger than that, but let's turn off this 100 VW and hit save and there's no width declared anywhere and it's already filling up all that space because that's just what block level elements do. They fill up all the space that's available to them. So I don't even need to come in here and say a width of 100% or something like that. This isn't really going to break anything, but the default here is actually auto and I've done a video that looked at the differences between 100% and auto so I won't get into it. But basically auto is better than 100%. For most things, there's always going to be exceptions, but if you don't declare something because you think, oh, this has to be that big to clear it because when you put it together, it's not already doing exactly what you want it to be and you need to change the behavior of what's actually going on right now. If you do want to check out that video, I'll put a card popping up and a link in the description and there'll be a few links because I'll probably mention a few videos along the way as well. But yeah, just stick with the defaults, embrace the browser, work with it, not against it. And so don't declare things that you don't need, especially things on viewport, you know, on the body setting viewport widths for widths that you don't need. It's just it's going to get in the way and it's not actually going to help at all. Speaking of viewport units, actually people love them, especially when they're starting to get into responsiveness because it feels like the type of thing. It's a viewport unit. It's going to be responsive. It's going to be flexible. And most of the time they don't quite work the way you want them to. So I actually there are times where I use viewport units, but they're quite limited in where I use them. I often use them for padding with them like a clamp because I want the padding to be able to adapt, but I want a top end and a bottom end or there's other things like that. But I never use them for like, I need this thing to be this size. The one exception might be if we come back to my header is setting a min height and doing like 100 VH or something like that. Because when I do that now, like I might want this area to actually be 100 VH and I want it to fill up the entire space or often even I'll have like a hero area or something. I might do an 80 VH because I want people to see that there is more content a little bit lower down. But the nice thing with this is like, no matter what happens, it's going to be there. So that's kind of cool. And this is I think a decent use case for viewport units. But then of course I did this as a min height. So if they're on, you know, somebody's going to go on your site on a phone and have it horizontal for whatever reason. Doesn't mean there's a good reason for it, but someone will do it. And so at least it won't break and cause any overflows if that's the case because we used our min height. But in general use viewport units sparingly and sort of see if there's try other things first and if they're not working, then maybe go to the viewport unit. I just find that so many of the problems that I'm solving a lot of the time or helping people with on layout side things are often caused by viewport units just being used when you don't need them. And so far a lot of what we've been looking at is sort of letting the browser figure things out for us. We're saying like the browser is going to figure it how wide something should be, but don't go bigger than this. Now if it can, let's go to the height that I want. But if there's you know, we're getting too small. I don't want any overflows. We're going to prevent that from happening. So we're sort of hinting at the browser what to do rather than saying this is the absolute thing that I need. And this is that mindset shift that you really need to take is let's work within all of these weird constraints that the browser has, because there's just all these different environments and all these different things that you can never account for every possible thing that could happen. So just by more hinting at things and letting the browser sort of live within those constraints, it just makes your life so much easier. And obviously I'm looking at very simple layout thing. So let's jump into other ways that we can actually get that to work. So if I look here at like this list that I have, that's right here. I have this class of tags. So let's come and this is like the really simple way. Like don't overthink things. If you if you need stuff, I can come in my tags. I could style these up and make them actually look like tags. But let's just throw a display of flex on there because then they go next to each other and we'll throw a gap of two rem to spread them out. And maybe we'll do three just to spread them out a little extra. And that's awesome. Like it works. But then we run into this issue where now they overflow out the side like this because now we're too narrow and flex box is flexible as it is if you run out of room, this type of thing can happen. So what's the solution? Do we need a media query? Do we need to find out a way? No, all you have to do is come on here and say flex wrap wrap and just like that. Now if there's room, they're there. There's no room. Let's just even come on these and change. Like we'll do a color of red just so we can. That's terrible. We'll bring this color down on the background just so we can really see those things coming through and we'll change this over to an orange red because it's going to look a little bit nicer. Not terribly. There we go. But you can see now nothing's overflowing. It just works. The browser is figuring out how to do it. Maybe you want to change the gap left to right and top and bottom so I could do that here with like one rem for my gap this way and a three rem for my gap that way. But it just works. I'm letting the browser figure out when it should break because it's when it's running out of room and I'm trying not to say this is exactly what my layout should be. Here's I want them to go next to each other if there's not enough room wrap down. That's perfectly fine for that type of thing. The other thing that we often see to down here we have another thing and I'm going to turn off that outliner but the border on my body what we go down here. So we'll get rid of that but I've set up all these products down here at the bottom. So you can see a product or actually it's just going to look at the HTML here. So here I have this div class of grid and then inside of that grid I have all these products right here and this is a really common pattern to have so we have our grid and I do a display display grid because it's what I want to do. You probably want a little bit better of a name here but then I can do my grid template columns and if you haven't used grid and you're only using flex I would really recommend that you do learn grid flex is amazing. It's fantastic but grid does some things better than flex and flex does some things better than grid does or I don't know if I said that right but each one is good at certain things and less good at other things and so you want to sort of lean into what they're good at. So I could come in and do something like this right and make a two-column layout. So I'm just saying template columns give me two of them and they go next to each other and I have two columns or I could come here and I could say I want three columns and then I have three but once again we run into this problem of you know when is it again you know at one point they get too narrow do we need a media query to decide on when things are changing and breaking and it's like well we could do that or we could take the more intrinsic approach and this is a term that was coined by Jen Simmons called Intrinsic Design or Intrinsic Layouts where the brow you're sort of hinting at the browser what to do and it's just going to figure it out for us it's so much easier to work this way and you can the whole pixel perfect thing first of all please don't try and do that but you can get really close and line things up and get really adaptive good designs much easier to maintain by taking this type of approach. So here I'm going to come in with a repeat of auto fit and if ever if you've never seen this for your template columns it's there's an auto fit and there's an auto fill auto fit is the one you want 99% of the time and just you just use auto and basically here we say like auto fit and then it is a bit weird we have to do a min max this is I think one of the reasons people get a little bit thrown off by grid but I swear there's if you learn this and you just learn like the basics of how to like set things on two different based on line numbers and and maybe that's about it at the beginning that's all you need at the beginning of using grid so like it the syntax if this one's a little bit weird it takes a little while to get used to but learn this maybe this is the only thing you use grid for at the beginning and and the 1fr 2fr 200 pixel type things for your specific columns and your golden that's you know there's a lot of complexity with grip but you don't need to know all of it sorry for the tangent my min max here I'm just going to say 250 pixels 1fr and now it's going to let them get smaller but as this gets bigger as soon as two of them can fit next to one another and be 250 pixels well then we'll get to and then we get three and then it's going to stop there because I'm in my wrapper so we never have more space so they can never grow bigger than that but if I had more room it could go to four and it could go to five so it's all depending on the space that's available but I just get these they're working it's super handy it's works amazingly well and I don't have to worry but when this is happening that's always a question I get from people is what you know when I'm using my media queries where do I put them like what what are the breakpoints I should be using I don't know if I can avoid it I just won't put any at all because I can let the browser figure it out for me whether it's things wrapping along like this or whether it's my layout that's going like this anything like that it's just fantastic and we're letting the browser do the heavy lifting for us and this idea of letting the browser this is where let go of the control it's really the purpose of this entire video is that mindset shift of leaning into letting the browser do its thing and just sort of hinting at it what we need now there's a hundred percent times where you do want to use media queries so it's not to say never but sometimes they can be useful and it's usually when you have like a specific thing that's just going to switch and there are there's actually like other ways we can approach this but let's keep things really simple and if we come and look at my HTML here I have this div class of width sidebar and it just has two children in there their names aren't really terribly important it's basically that we'll see what it is once I style this a little bit more but I'm just going to come in and drop this here where my width sidebar I'm just going to say it's display grid to sort of set the stage and it also will help with my spacing a little bit and then I'm going so it's just coming here I'll hit save and you can see it adds a little bit of spacing I probably want to style this top bit a little bit better if I was actually doing this but then I'm going to say when we hit this minimum width size of 760 pixels well I'm going to add in some template columns here so I'm going to give myself a column of 300 pixels on the left and a 1fr so just take up the rest of the available space and we can throw that on the right side and let's check this out and you'll see that once I get to that well now I have my two column area set up right there and it's exactly what I want it to be I also increase my gap just to make sure that the spacing here wasn't too big and so at smaller screen sizes everything stacks and it works fine this area is just doing what it needs to do down here and actually because of how it's working you can see it goes back to one column because again we're in a space where those are too small and they couldn't fit at 250 pixels and this is the nice thing with that intrinsic approach is we're not looking at the viewport we're looking at where that item is living so it can adapt to whatever you throw at it basically and eventually it'll go back up to the two columns there but then I have this two column area here and the way I like to approach media queries is I like to be doing it where I'm adding complexity so that's generally how I think about it and I'll talk about my breakpoint choice in a second but on that idea of adding complexity I'm setting the stage here display grid sort of set things up but display grid will keep everything just stacked and then we okay now at larger screen sizes we're going to go up and I'm going to add the complexity of having a new declaration here that's going to set up two columns and so I wouldn't want to set this up here and then use a max width media query here to remove it because if I did that then I have to overwrite this and so then and make it one column well I already had it as one column and then I'm adding the complexity it makes it so much easier than doing it the other way around right so that's how I approach that of just adding complexity through my media queries and that could be a max width media query the one I always reference for that is a mobile navigation where often the mobile version is much more complex and has a lot more declarations than the desktop version does so there I might use a max width media query to add in that complexity but most of the time most of my media queries do happen to be min width ones and as far as how do you pick a breakpoint it's definitely it can be a little bit tricky if you don't have a designer to tell you where to put them but I just wanted to do it somewhere where the size is like you know this is getting pretty narrow things are going to start getting pretty squished seems like a good place to actually just have everything stack instead right so that's how I decide on the breakpoint that I want to use but the main takeaway I want you to have this is that you need to work with the browser and not try and be absolutist in the layouts that you're creating and to sort of be hinting at the browser and telling it the best way it should be doing things and if you'd like to sort of have something that's going to help you go through on like a day by day basis to get you there I have a completely free course called conquering responsive layouts it's all about making this mindset shift with little micro lessons every day over a 21 day period where it just sort of gives you little hints and help and one lesson builds on top of the other lesson and if that sounds like something that could benefit you and you'd be interested in the link for it is just in the description down below and with that I would like to thank my enablers of awesome Andrew Simon, Tim and Johnny as well as all my other patrons for their monthly support and of course until next time don't forget to make your corner of the internet just a little bit more awesome