Learn how to use Media queries & Container queries

hi there my friend and Friends media queries are an essential part of modern web development as they're a big part of how we create responsive websites today though that is actually going to start to shift or it actually has started to shift already as we now have container queries in all of the major browsers as well the two of them work very much in the same way but in kind of different context and it can be confusing at first to know when you would use one or the other one and it's actually kind of hard to EXP explain what container queries are without first explaining how media queries work and that's what this video is going to be all about we're going to dive in and compare media queries and container queries we're going to look at examples that show how they're different and we're also going to talk about when you might use one over the other and also take a quick peek at some of the newer features that are sort of in the pipeline and coming in the future with these as well now just before we dive in though I do want to let you know that I have new merch check this out uh I worked with with Christopher Kirk neelon who is also the designer behind the state of survey logos and shirts to come up with a few unique CSS Focus designs if you'd like to show off your love for CSS and also let people uh know that you're a front-end friend as well the store is linked down below and I'm also going to be retiring the old lineup as well keeping just these three designs so let's dive right into it with potentially the most basic example and sort of the common one we see for media queries um we're going to sort of explain how this is working we're going to get a little bit more into practical use cases than this one uh but just really fast media queries they've been a core ingredient for responsive design ever since Ethan marot demonstrated them in a 2010 article defining responsive web design he's ushered in this idea of what it is and media queries were a big part of it and it's basically to tell the browser to apply a different style when we hit a certain screen size so here you can see that we have my purple and then we turn to this orange red right here and you know not the most practical example but it's a very visual one uh a few things about the syntax of a media query that are really really important and this will follow through also when we get to uh container queries for the most part though there are a few unique things with container queries but starting with the media query we always have the app media at the start so it's an app media and then we write whatever it is and if you're very new to CSS what I'd encourage you to do is do your app media open and close the regular parentheses and then open and close some curly braces just so you don't forget anything along the way cuz this is sort of the core syntax behind writing whether it's a media query or a container query we just want to get that core syntax down so we don't forget anything then in here you write what you want so we can do my Min width of say 600 pixels and then apply the styles that we want so that's just the core thing we're saying add a minimum width so it becomes 600 pixels and bigger we're going to apply some Styles and you'll notice in the original one I had here we also had this screen so we're saying screen and this and this just means that it's going to apply for screens but not if somebody prints the website so it can be useful you don't need to include that we could just do a media query this way or if it's something that you think people might be printing out and you want to make sure the styles are only applying for screens then you can include the screen at the beginning here now I've just updated the code here you can see a bit of a difference uh and this is one of the core reasons in my opinion that media queriers are still extremely valuable uh is that we can update custom properties through media queries and what's nice about this is I can do my declaration here for my body's background color one time and I can update that custom property here and if you're not familiar with custom properties I'll include a link in the description that talks more about them but uh I can just update that custom property and then it's still going to work just like it was working before obviously we don't want to be changing background colors like this that's not the most useful thing in the world but this exact same principle can apply for font sizes and this is a way way that I often will use media queries uh on my projects and I'm going to make this one just a smidge bigger and we'll go with like an 850 and so I have my styles that I'm setting here where I'm just setting all of these different font sizes here and what's nice about using custom properties like this is I might use this one in six different places but then I don't have to go through and reselect all of those different things if I want to change that font size at a different media query I can just change that fs500 here within a media query and now my font sizes are going to adjust between those different screen sizes like that now there's other ways of doing responsive type with clamps and other things that are wonderful but as a very simple system this works really well and when we're doing something like this what we're essentially doing is we're telling the browser how to change Styles at a specific width and we call this a break point and we generally call this cuz often it's where the layout breaks at different screen sizes so sort of it breaks here and breaks there I guess um and the one thing with them is you can do it at something like this or if we go back to our simple example here just cuz again it's going to be a little bit more visual we can also create ranges so I can come in here and I can say instead of just being at a minwidth of 600 I can say and Max width of say 800 pixels and now it's only going to be orange red from when we get to a width of 600 it's going to go and then it's going to turn off again at 800 it's only applying in between this range that we have right here now what you might want is a different background color or maybe more realistically we'd be doing this with font sizes where you're saying like I have this and then I want my font sizes to get bigger again at a larger font SI or screen size uh but I'm going to stick with the colors just because they're a lot more Visual and we're doing silly demos uh but you know um definitely there's there's other times where you might want to do this um then we're going to come here and I'm going to choose this one again and you might say well at a larger size than 800 I want a new style so we're going to do a screen and then we can come here and say that we're going to have a minwidth right uh and this minwidth is going to be we can switch the color uh at that size so here we have our Rebecca purple then we get to our orange red and prepare yourself for a very bright color uh as we get into this bright green color now there is one thing with this is when I get to exactly 800 pixels we don't actually know which one the browser is really going to pick here um it is going to this light green but we're actually telling the browser it should be two different colors and it's relying on the Cascade here a little bit in how it works uh and because if I move this up on top and we have the minwidth one right here at that exact 800 pixel point it's going to be keeping the orange red which we can see right here you see I'm having a little bit of trouble but then we have the orange red and then it's going to that one so you sort of run into a bit of a conflict and there's times where you can even have like all the Styles disappear if you don't have like a base uh value set up and it can be a really a little bit weird so often what you'll actually see is like this thing where you get to a 799 here and then you have your 800 here or if you're using other units uh you might even see some that have like uh decimal points or if you're using Rems or M's cuz you don't have to use pixels for these and if you watched older videos of mine you might have seen me using M's it was for browser consistencies but those have since been fixed so you can use pixels safely here um but you might see something like a you know 65. n99 REM and then a 66 REM here something so if ever you come across a code base that has that that's the reason is you don't want this overlap of styles and you're trying to prevent it but luckily they've actually updated how things work a little bit with a new Range syntax so instead of having to write things like this we luckily don't have to do it anymore so what I can actually do is my app media we still want to put in the same syntax before we open and close and then we include our rules inside of there and now what I could do here is this is kind of interesting I'm going to delete this one here as well um just so we can focus on one at a time but I could say if my width is greater than 600 pixels and this is kind of a nice much cleaner way of writing it because you know exactly what you're getting and you can also easily create ranges here as well like we had before so I could actually come here and say uh 600 pixels and my width so my you know if this should be pixels not just 600 I'm I'm saying if my width is greater than 600 pixels but it is smaller than 800 pixels then we're going to run into that range again where we get it working at those and this is just especially if you're coming from computer science or something like that this is much cleaner uh and easier to understand but it's also I find a lot easier to do we have the single one we don't need the ANS and other stuff um now this is if it's smaller than 800 which means it's going to stop at 799 so as soon as I hit 800 pixels like this isn't including that anymore if I wanted to include those numbers I can actually put the equal sign now this is looking really kind of funky here um just cuz I have the glyphs on in code pen but really this is what I'm typing just with no space in between you can see it's kicking in a glyph uh when I make that change so it's just the greater than or and equal to so if my width is between 600 and 800 inclusive then it's going to be this orange red and then of course I can do an at media over here if I wanted to and then say 800 pixels and as long as my width is greater than that value uh we can do my root and BG color becomes you know whatever we want red um just to do something fast and then we get all the different ones the red I guess is a bit hard to see uh the change let try uh per let's just do green so we have something that's a bit different so you can see all of them are working now one thing with this range syntax that is important to know is browser support is not perfect uh this is as of the time of recording it's in all the major browsers but it's about 89% uh support right now so just do be careful if you are using it do keep that in mind but I'll include a link to this in the description below so you can check what the upto-date browser uh table is if you're watching this in the future and one of the reasons Reas actually I really like this syntax more is just because I always found the minwidth and Max width a little bit counterintuitive or weird CU minwidth you're saying the word Min but it was bigger than and then Max width would be smaller than just when you're going fast it can be a little bit counterintuitive where this is like much more obvious right you have that or I could do it the other way around I can say if my width is smaller than 800 pixels you can type it however you want and it just works and it's I find it much cleaner and much better so I'm happy that it's here now we're going to move on to container queries in just a second but one thing I do want to say really fast is this isn't the only thing that we're using uh media queries for this video is really focusing on like layout that's why cuz container queries are much more for layout than other things but we can do a lot more with media queries than just check for font sizes for example in this one right here you can see I have my font sizes set up but I also have a whole bunch of colors set up and I have this prefers media uh prefers color scheme dark and so if the person's on a dark scheme I'm redefining all of those colors so I'm completely changing my color palette and you know dark are mean lights and and so on and so forth and so if somebody was on a computer that had their their system settings were for a light theme they'd be getting light colors uh like we can see here because it's using the ones there and if they're on something like I currently have with the dark as we saw then they would be getting the dark one like we can see right here so that's one of the things we can check for we can also do prefers reduced motion for people who have requested less motion because it could be that they find a lot of motion disorientating or it can actually cause nausea and and if you have vestibular issues and stuff you don't want a lot of motion on your websites so we do have instead of prefers color scheme it would be prefers reduced motion and there's either reduced or no preference uh that you can use you wouldn't be redefining your colors you'd be redoing your animations in there you can also check for aspects ratios Heights if devices can hover and other stuff like that but I'll include a full link uh down below to an mdn article that shows you all of the different things because as I said I want to focus on layouts for the most part but I just I do want to mention that media queries can do more than just layout stuff they're useful for a whole bunch of other things and if you'd like a deep dive into the other things we can do with media queries let me know in the comments down below but with that done let's jump into the world of container queries now container queries are very similar to Media queries but there's a few key differences into how they work uh we sort of are going to treat them almost like a miniature viewport so it's the same idea as a media query where we're going to change the layout depending on the size it's available it's just we have to say what we're looking at instead of looking at the entire viewport so as a first example here you're going to see I have these three cards that are there and so it's just a card a card and a card nothing too fancy going on but they're all in a section here called of a class of of cards and what we're going to do is and this is one of the requirements for using container queries is you have to define the container because if you don't have any defined containers the browser doesn't know what you actually want it to be looking at so to define a container there's two different things we can do we can just say that this is a container we can also give it a name and we'll get to the name thing in a little bit uh but I'm going to say container type is inline size and this is the one you're going to use almost all of the time we do also have the option of only saying size here which means look at the height and the width whereas when I say inline size it's the inline axis this is like a logical property and the idea with inline size is that it's again it's basically looking at the width if you were to go into a vertical writing mode um then potentially I guess it would be looking at the height and that's all we have to do and when you first do that it's not it's not going to change anything but we're saying now the browser knows that this cards is a container and as soon as I do that I can now open up this world of container queries for the things that are inside of there which will be my individual card here so what we're going to do is we're going to come here and just like instead of an app media we're going to write at container we're going to do the same open and close of a parenthesis and then an open and close of a curly brace here like as usual I can can Define my size so we can say A Min width uh if we want we can do it this way so I'm going to say A Min width and in this case I'm going to say 45 CH uh another option though if you prefer the range syntax is you could definitely say if the width is greater than 45 CH that would be the exact same thing and one nice thing with container queries is because they're new if you're using a container query and it the container query is supported that means the range syntax is also supported so you can just use it this way all the time if you prefer so if our width is greater than 45 CH we can then select a card now I already created a quick style here just so we can do it a little bit um faster but basically I'm just going to go to this two column layout uh and just have my my title go all the way across the top so when we're at smaller screen sizes and if you don't know the CH unit it's characters wide so as long as I have a width of 45 I I just found that worked well you can use pixels you can use Ram you can use whatever you want there when we get to that size you can see we switch over to to it being this two column layout and then it's going to work and and stay that way and when we get smaller it goes to here uh and we're doing this based on the size of this cards right here so right now you might be thinking well I can do the exact same thing you're doing here with the media query Kevin it's not really changing much why would I do it this way instead and you're kind of right so I'm going to update the content and I'll be right back all right so what I've done now is I have this main area right here and inside of the main we have this section here and then the section that we had with my cards originally before right there section at the top is just my content and then down at the bottom we have that and what I'm going to do is I'm going to come in here and I'm going to add in uh a media query just a traditional media query saying when my viewport is 760 pixels or bigger because that's how we use the Min width we're going to go to this two column layout where my column on the right is uh 300 pixels wide and then this just takes up the rest of the room and you'll notice something really important happening here which is if we go to the really small screen sizes because we have this set up only within my container query at the small screen sizes they're stacking when we get enough space they're going next to each other but then once it goes back to being a sidebar they're stacking on top of each other again and this is not something that we can do with a traditional media query this is something that only a container query can do because it's looking at the size of the container itself which is where these are living since we Define that as my cards right here so let's just give this a border so we can see it 5 pixels solid red you can see that this is smaller than my 45 CH so because it's smaller than that they're stacking and it's not using what we see right here which is amazing because if I change this back to a traditional media query it's going to go next to each other and it's completely breaking my layout as soon as we get past that stage here it's fine we get to the two columns and then it's just always going to stay two columns whereas with the container query it's it's all about where are those Elements Living and how much space do they have available to them this is really how the modern web is going with component-based design and it just makes our lives so much easier and there's one more really important thing with container queries is that we can also name our container queries so I've set up this other example uh right here that we're going to take a look at and in this example what I want to sort of uh focus on is how you might have similar components in different areas and you might want them to behave a little bit differently so the one thing I have done is add this primary content class right here just so I could style that card differently just so we can keep an eye on it and know which one I'm speaking about um so we're going to be sort of focused on this one and one thing it's actually really important to know with container queries before we get to this naming part is if you don't have a container that's defined like here I have my Dot cards set up this should be working but I've deleted any mention of that cards with the inline size on it so because that's gone it's just not working for container queries to work you need to have a defined container it will not fall back to the viewport and that is a very important thing to keep in mind so let's come back onto here we're going to do that again so it's cards and we're going to do a container type of inline size and again you could do a size the size has a very big limitation cuz you're going to also have to have a defined height on it you might feel like sometimes you want to use just size cuz you don't know which one you want to look for inline size 99% of the time I guarantee it uh and now you can see that by defining that here on my cards the ones on this side it's working but this pink one it's not working because the pink one is living in my primary content it's not living in that other space so because it's living in the this primary content area there's nothing toine for this one it's not working over here but these ones on the side that are above my head now those ones are working completely fine they're you know sort of as intended where they're breaking over and becoming two columns when they have enough room for it so one thing thing uh that you might think about doing is having a container class that just does this as a utility class and it's one of the reasons I've stopped using container for being a Max width is because I think I might start doing this uh right and using that's why I have a wrapper up here um to hold my content so just something to think about but of course you don't have to do that we could have our cards and my primary content are both container type inline size now and and again this is like this magic thing where these both have the same Styles applied to them other than the background color but these ones are stacking on top of each other because they don't have enough room and this is going into two columns because it does have enough room this is magical if you're new to CSS and like you just might be like yeah that's cool uh if you've lived in the old way of doing things this is just incredibly incredibly useful uh so these sizes everything works the same they're stacked they go like that but where things can potentially get very interesting is if I name my containers because maybe I want things to be a little bit different depending on the situation and where things are being placed like maybe this one I wanted to always stay like this but these ones when they run out of room I want to change the text alignment it's a bit of a silly one but um uh let's just we're going to come here and I'm going to do my Dot cards and we're going to say uh we already have the container type being defined here so here I'm going to write container name and we're just going to call it cards makes sense right and then so this is my regular container but we we can do is we can also do an at container do the same thing open and close my parentheses open and close my curly braces so we have that set up but then here I could do cards so I'm putting the name of the container let's come in with the same size just so we have some consistency uh between those and I'm going to say that my card that is inside of that will get uh a text Al line of a line of Center and just because it's fancy demol land we're working in now and we can do silly things to make things stand out I'm also going to make the background yellow on them um just so we can see a big difference so if I shrink these down now you see that they're getting a text alignment of Center this is going to the center and this is lining up Center here and so when we get to these bigger sizes it's getting that yellow background it's getting the centered and then it's not applying anymore but this is only working on these ones and it's not applying to this one and that has nothing to do with the background color I set uh originally let's delete this just to show it's not specificity there's nothing else it's because we're only applying these Styles if it's inside of the cards container here and that's only going to work because I've named my container right here so this is the type of thing where you can say that you know you have one component and it could have these certain Styles and then depending on the container it's in not only can you change the layout but if it's in a very specific situation where it's in a specific container you can also have it change and be different as well and this is just extremely powerful and and super amazing and useful uh in in different ways and just really fast I've done it with the long hand on these uh if you wanted to you can let just remove this from here and on my cards you could also use the container shorthand where I'm going to say cards and inline size and now if I take a look at it you can see it's still working where I'm getting that yellow background that that's still coming on so you can either use the long hand or the short hand where you just have them separated with this forward slash and it's going to work in either situation we're registering the name and then we're saying that it's looking at the inline size and just to reiterate how this is working a media query is going be hey browser at this viewport size when the browser window is this size we're going to apply these Styles when we get down to a container query we're saying hey browser when this element is living inside a defined container when that defined container gets to a minimum size of whatever I want you to change the layout and then this last one here is saying hey browser when a card is inside of a container named cards that has the specific size that we're setting here then I want you to do some different styling on it now another thing that has opened up and container quer has got a lot of the attention but the other thing that's really really useful with container queries is the container query units so if you're used to seeing things that have been done with viewport units container query units are very similar uh but they're amazing and for this one I'm going to come down here and let delete the the yellow cuz we don't really need that applying and I'm going to move my face out of the way just cuz we're going to want to be looking at everything uh and let's come on my card and we're well let's do my card H2 actually so card H2 and for to begin with let's set the font size here to 5vw and please never use uh viewport units that's a little big 2.5 uh never use viewport units alone like this if you're going to use viewport units on a font size uh do do them within a clamp and I'm going to suggest the same thing for container query units as well but let's just say we do that and right now they look the same uh which is I guess okay but this is getting kind of small here uh and then at one point this breaks and oh my goodness they're getting tiny and again this is where clamp could come in handy but here like they're all like these are just as big as this and maybe you don't want that you want the ones here to be smaller and this to be bigger cuz this has more room it should have more visual weight well instead of that I'm going to change this to a container query in line uh there is a container query W which is for width or inline for the inline axis we're already saying that this is my inline size so we might as well be using the inline here as well uh and now you'll notice they're really small but I have this Title Here is tinier than this one even though the font size is declared at the same size and so let's boost this up to maybe A7 just so they're not super small and you can see this one is really big and this one is smaller because the size is being defined by the size of the container it's basically like 7% of the container size so this is in a smaller container it has a smaller font size this is in a bigger container it has a larger font size and what I would normally do is probably do a clamp here and then around my clamp I could say that this is going to be you know the smallest it's allowed to get is a 1.5 RM it has the seven container queries so that's like its growth factor and the biggest it can get to maybe is a three so uh we're just sort of setting a minimum and maximum to make sure that they don't get either way too big or way too small uh and the nice thing here is when they're stacking they're all the same size because they all have the same amount of room to work with it sort of makes sense but then once we get into this layout these ones are the visually the weight is smaller on them so the font size is fitting within the container makes the whole thing more balanced whereas because this one has more room gets a larger font size wonderful uh these units are fantastic we have inline uh we also do have B here for block and what that means is it's now it's the block or this would be the same as doing an H here where it's looking at the height of of them uh so block for the block axis so here if I take this and I shrink it down you'll see that they actually start to shrink and get smaller or grow and get bigger because it's based on the container height and that's the thing that we're thinking of is always the containers height uh and in these situations once again I find there will be use cases for going on the Block axis um and actually in in this case I think the block axis is probably not even looking at the containers that they're living in but it's looking at the viewport just because I've only Define these as the inline size here so the container's um height isn't part of the calculation but this is another really nice thing actually with the units is the units unlike the at container if there's no defined container these will fall back to being like viewport units so if I come and I delete these right here it's not going to look great but you're going to see that it's uh and actually this let's switch this back to the I so it's based on the width and you're going to see that they're all behaving in the same way again because they're just focused they go oh there was no container so I guess my container is the viewport and they're going to lock into the viewport so at least there's like this consistency in a fallback it won't break your font sizes uh which is really really handy that's not the same with at container you do need to have a defined container so it might be useful uh at times just to have something like HTML container type of inline size I haven't played around with this idea so I don't know if it's a good idea or not uh to have this but it could be just to make sure that like if you end up placing something that doesn't have a defined container at least it has something to fall back to uh along the way I'm but again I'm not sure you might just maybe it's better that you don't so you're making sure cuz you know if the layout say this actually does end up changing but you didn't really want it to for whatever reason um because you need it to be in a defined container anyway it might be safer not to it might be safer to this is one of the things it is relatively new so we're still playing with and figuring out what the best practice might be so if you have any thoughts or input on that please do leave a comment down below cuz I'd love to sort of have a bit of a discussion around how we could be you know is this a good idea or a bad idea type of thing uh and if you've played around with it if you've run into any problems with it or if you found it useful um or if you never tried it but you said hey that would help me out in this situation leave a comment and let me know cuz I'd really this is the type of thing I'm trying to figure out still uh these days and maybe with padding or something doing the the man the max here could actually be useful but for font sizes I just find the cqi is the one that I end up falling back to and using the most often now an important note here is just like the range syntax that we've been looking at container queries uh on the size here they have about 90% browser support right now again they're in all the major browser engines so please do keep that in mind if you're going to be using them today again I'll include a link uh in the description for an upto-date support tables if you're watching this anytime in the future uh and if you do search this up on your own on can I use you'll also come across Ross this which is style queries which they're only sort of working in the chromium browsers right now but that still gives them 70% support which is kind of crazy uh and they work in a very specific way but this is a little bit of the future of where they're going because when we talk about container queries they're we we' call them container queries but they're actually container size queries right so where they're looking at the size but there's more that these or the spec has more than just being able to do that which is really really cool what we're going to eventually be able to do or if you don't mind only it working in in Chrome right now there is the a thing that we can do um that's going to be expanded upon and what that is is style queries so what we can do to set up these style queries which are they're going to be great um is it let's just come here at the top and we're going to set them up here uh and we're going to say that the sidebar here or we're going to play around with that a little bit and so we're going to say uh let's just come here we're going to say add container like you normally would set it up like like that but the one thing that's different here is instead of having a named function right so before we had my cards as the name right here or it wasn't a function it was we're getting the name of the container we're not going to put a space here we're going to keep it all together and write style so this is like a style function with no space and the space here would be a very big difference in the future the plan is for this to work with like I could check for the background color and then apply different styles depending on that right now this only works in Chrome and it only works like it's it's it's limited it's partial support cuz it's only working with uh checking the values of custom properties but this is still extremely powerful so what we can do is I'm going to come here and we're just going to look for theme of dark and so if my card is inside of a container that has a theme of dark we can say that my card the background is going to be black and the color is going to be white then uh let's just make sure we have both of them named cuz I think I deleted it so we had my uh primary content as well as my Dot cards and on both of those we're just going to do container type of inline size now it doesn't have to be something that's necessarily a theme you might have like a BG color and you just want to be checking what the value of that BG color is for example but I think this type of thing will be a common way to do it where now if I come on to my primary content here and I I'm going to do it as an inline style it doesn't have to be uh but let's just say style is equal to and because maybe you're this through JavaScript or something like that and we're going to say theme is dark uh I don't have anything set up for those ones but look it's changed the style of the child because our container has switched over to that really fast introduction here just cuz I was watching the final edit of this and I said wait a second I defined my containers but with style queries you do not need to have a defined container so just as you can see here I have like the test test two we have them all going the style query is working and they have no defined containers one of the really big benefits of style queries is we don't need them so even though I'm using at container to do a style query we do not need to have a defined container for them to work just wanted to make that clear since right before I started using them I redefined those containers that i' had set up and I didn't want any confusion on that and if you want to learn more about these cuz it's it's something that's on the horizon but if you want really good examples and stuff uh this is one by una that it's fantastic un Kravitz um where she looks at like this new the low stock with the red thing all of these are being things that are conditionally being added through uh using this idea of if the style you know depending on the style of the container and she has a really good article here on the Chrome for developers blog that I'll also link down below that goes into more detail on them just because they're they're cutting edge right now and I don't want to go too far in but I sort of did want to show you sort of the future of where container queries are headed and now of course this BS the question of like well I mean not necessarily with the style queries but when it comes to container queries versus uh regular media queries which one should you be using and honestly I think both of them are still incredibly useful and there's no big rush to replace media queries with container queries just because I think for like large layout purpose stuff like I looked at when I set this up I used a media query for the the break that I had right here and I think this is still a very useful way to look at it when we're doing layout changes that are dependent on the size of the viewport itself then I think it makes sense to still use a media query but for component based styling then I think container queries are definitely the way to go because you can adjust it depending on everything including eventually the Styles which is just going to be absolutely incredible but of course all of this does also come down to this idea of having like responsive design in general and I know a lot of people really do struggle when it comes to just creating responsive layouts and it's often because we're trying too hard to set up specific things and you sort of need to have the right mindset and approach roach when it comes to approaching responsive layouts and if it's something in general you struggle with you know it's not just the media query or when should I use a media query or a container query but it's just the whole thing just seems like a big struggle I've recently put out a video that's a practical guide to responsive web design I think you might really like it it is right here for your viewing pleasure 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 just a little bit more awesome and buy a shirt if you like it bye

Channel: Kevin Powell

Views: 60,178

Keywords: Kevin Powell, css, front-end, frontend, html, web development, css tutorial, tutorial, media queries, container queries, media query, container query, responsive layout, responsive website, responsive web design, responsive web, crash course, deep dive, difference between media queries and container queries

Id: 2rlWBZ17Wes

Length: 34min 32sec (2072 seconds)

Published: Tue Jan 30 2024