HTML & CSS Crash Course Tutorial #10 - Intro to Media Queries

Key Takeaways

all right thinking so currently our website looks pretty good on desktop on larger screens like this but the minute we start to have a look on a smaller viewport which is what we'd be doing on an iPad or a mobile they start to look pretty rubbish indeed so what we'd like to do is make this design responsive ie it's going to look good on all devices regardless of the width of the viewport whether it be a mobile a tablet or a desktop screen so for that we're going to have to look into responsive design now there's many different things that make up a responsive website many different moving parts and one of those things are media queries and they tell the browser how to style something at a particular viewport dimension or in different devices for example we might want to style buttons or text differently on a mobile device when the viewport is smaller than we do on a desktop device okay so we can use media queries to target these different viewport weights and say ok well at this width then I want you to style something like this and when you go above this width I want you to style it differently that's what media queries are all about another component is the viewport meta tag and that is basically going to allow us to tell the browser what width the viewport should be and if we should zoom in or out now that might seem a little confusing when I just say line up but as we look at it later on it should hopefully make a little bit more sense and also we can think about things like responsive images so that we only load smaller images with smaller file sizes for small devices and in addition to that we can also think about the overall usability a user experience is going to differ a lot on a mobile than it does on a desktop so we need to make sure that we make design decisions to reflect that now in this video we mainly going to be talking about media queries and how to use those but we will take a little look at the viewport meta tag as well now that my friends just one more thing before we start coding when you're designing a responsive website you'll want to have some kind of clear process and strategy put into place to make this responsive website now one such approach and quite a popular approach is a mobile-first approach and this means that we should plan our design for a small mobile device first and then adapt them for larger screens now that's a good approach for two main reasons in my opinion first of all because mobile screens are much smaller and we can fit less on them it forces us to think about which content we really need on our website the important parts if you like so it helps us as developers to prioritize and plan around those bits of important content so we can cut a lot of the riffraff out of the website essentially now secondly developing it this way can also be much easier too because it basically means that we can code a website for a mobile using essential content and styles and then we congratulate rolling more styles and contents for larger screens now that's much easier than starting with loads of styles and loads of content for a large screen and then trying to fudge everything together as screens get smaller and smaller now seeing a lot of developers do that and believe me when you go for a mobile first approach it's always a much more pleasant journey as a developer now for our websites so far we've already created a desktop version like this so this mobile first approach has already been thrown right out of the width oh we can't do that and we're going to go the other way from desktop to mobile but I just wanted to make you aware of this approach so that in the future when you're playing around with media queries and responsive design you can think about this and plan your website maybe for a mobile first and then gradually go to desktop okay so for now let's just get some practice with the viewport tag and media queries all right then so the viewport meta tag is going to be something that we put inside the head because it's gonna be something that describes the website or tells the browser something about our web site rather than something that is actually shown on the website so it's going to sit up here in the head but what is it exactly well the viewport meta tag tells the browser at what width the viewport of the browser should be now I'm just going to go over to w3 schools over here and show you what happens if we don't add a viewport attack then we take our website and essentially scrunch it all up so the text is tiny and the images a tiny looks like they've been squashed on a page like this that's if we don't add a viewport meta tag in now if we do add one in and we say look we want the viewport of this website on your device to be the device width then it's going to look like this so you can read a little bit more about the viewport meta tag right here and see how to add it into your website and in fact what we could do is just copy this and paste it over here okay so what we're saying here is okay this is a meta tag information about the site then we have a name attribute the name of this meta tag and that is the viewport then the contents of this meta tag are these two things right here we have two properties we have a width where we specify the width of the viewport and we're saying okay well let the width of the viewport be determined by the device width and set it equal to that so on a mobile phone your device width might be something like 500 pixels so we're going to set the viewport to be 500 pixels rather than something like 2,000 pixels that we typically see on a website like this because if we didn't have that meta viewport tag then what would happen is it would take that 2,000 pixels and squash it up into the available room inside the mobile so we're kind of canceling that right here and saying well no don't have a much larger viewport than the device have a viewport which is going to be the same width as the device I hope that makes sense we're also saying right here that the initial scale of the website should be 1 in that we don't want to zoom in we don't want to zoom out if that was - instead it would be very zoomed it would be twice as big so that is basically it that's all we need to add in just remember to do this when you're making a responsive website all right then so the next piece of the puzzle when it comes to responsive design is the star of the show themselves media queries so media queries allow us to target elements on a web page and style them differently a different viewport widths for example something could be styled differently at 500 pixels in width maybe on a mobile device then it would be at 2,000 pixels in width on a desktop for example this on a desktop looks fine and at this viewport width everything is dandy however when I start to get smaller then this over here now starts to look a little bit squashed so at this point I might say to myself well okay what I'd like to do at this viewport width which is remember up here so about 830 pixels I might want to say well okay then I want to make this text smaller and also if we scoot down here I might want to do something else with these images maybe put one on each row instead of next to each other so I can do that with media queries so how do we do this exactly well let's quickly go over the syntax of this first of all the way we construct a media query and that is by simply saying at sign then media so that is now a media query then we say screen to say we're targeting devices that have a screen that means basically desktop computers laptops mobiles tablets all those kind of things they have a screen right then we say and and in brackets in parenthesis we put down the condition now the condition for me is going to be max width is going to be 1400 pixels so then we open up our curly braces and any styles that we place in here are going to apply at this media query now what am I saying here well I'm saying okay well on screens on devices with a screen so pretty much any device then I want to apply these styles in here and I want the max width of that device viewport to be 1400 pixels so if it's above this then I don't want these styles to apply but if it's 1400 pixels or less then I do want these styles to apply so if I go to the browser and I get this - 1400 pixels which is about there I can't get it exactly but this width and down so here all the way down to here I want those stars to apply but as soon as it gets to above 1400 pixels which is around about here this width and up I don't want those styles to apply does that make sense so as well as max-width this could be min-width so i could say okay well now the min-width is going to be okay we'll change this to 800 pixels so that says I want these styles inside these curly braces right here when we add to him anyway I want those to apply to devices where the minimum width of the viewport is 800 pixels so if I scroll to 800 pixels of there abouts around here we're saying we want the Stiles to apply to this width and up okay so the Stiles would apply to elements on the page and that width or not but not below that width not down here because we say the minimum width has to be 800 pixels of the device basically of the viewport does that make sense okay cool so I'm going to change this back to max width and I'm going to put this at 1400 pixels so now I'm saying I want to start to target elements and style those elements at 1400 pixels and the less so as soon as we get to this device width or less then those styles are going to apply so what do I want to do at this width well all I really want to do for now is make this font size a little smaller and maybe even change this font size because at the minute that is if we have a look at the Li that is 24 pixels and maybe we want to start to make this a little smaller as well so let's do this first of all I'm going to grab the welcome text and a lot for that rule up here that we've already created it should be welcome and we see that somewhere I'm short there Banat welcome so I'm going to grab this rule and I'm going to paste it down here inside this media query so basically what I'm saying now is okay when it reaches this width or below then apply these styles to that element okay now we don't have to reapply the color because it already applies we don't have to re say that we want it to be an orange color because regardless these Styles unless we override them down here I'm going to apply and all widths we only add extra styles or override the current ones if we want to change them down here so I don't want to change the top attribute or the left and I don't want to change position or the padding or the color what I want to do is set the font size in here to be 20 pixels so let me save that and come over here and see if this looks any better does it change and it doesn't change and I think that's because we actually styled the h2 and not the Welcome banner itself so let's change that to h2 and save it and now if we go less than 1400 pixels okay now it gets much much smaller to small in fact so let's change this to 40 pixels and see if that looks any better still a bit small I'm going to go all the way up to 60 and see if that looks better okay that's that's a lot better so on larger screens larger than 1400 pixels it's this size but the minute we crossed the threshold at 1400 pixels watch this bit over here get smaller okay so that's what we're doing we're kind of adapting to the viewport size and shrinking our content a little bit okay so the next thing I'd like to do then is get these and they are the Li tags inside the nav and I'm going to change the font size of those as well so let me now say nav Li and say font size is going to be 18 pixels it was 24 pixels now 18 so if I save let me preview this we can see the font already is a bit smaller okay because the screens a bit smaller so we're just kind of adapting again to that small size okay so that will do for this width or thing everything still looks fine on the page at the minute now what I tend to do is just slowly get smaller until something starts to look a bit off or a bit too big I'm going to go all the way down to roughly I think about 700 pixels where this starts to look a bit too big so we'll say in fact probably before 700 pixels I think maybe even about 900 maybe about 960 something like that okay so at this point here I want to start to make this look a bit smaller I think again and let me see you down here okay no everything else is fine I think just this right here they're still fine so we'll make this smaller so what I'm going to do is just copy this and paste it down here another media query after the closing brace of this media query this time I'm going to change this to be 960 pixels then we don't need this we're not changing the Li tags anymore but this one now we're going to make the font size of this now a little smaller again so this time I'm going to change this to be I don't know about 40 pixels let's see what that looks like okay so yeah maybe that's a little too small but to be honest it will do so I think for now that's okay then when we get to about 700 pixels I'm going to change this again so round about there and at this point I think I want to do quite a lot first of all I want to put this all in one line and I want to make the font size even smaller and they also want to make all of the font the same size as well so this no longer needs to be bigger and I think in fact it shouldn't be over the banner anymore you should maybe sit underneath the banner going across so it was position:absolute before but we can remove that and put it to position:relative which will put it back in its initial place so we could do that as well and maybe align the text to the center so let's do a bit of this let me now copy this and paste it down here another media query this time 700 pixels so these stars will apply at 700 pixels unless then we're just going to target the welcome banner itself first of all and what I'm going to do is say this time I want the position of this to be relative now remember if I go up to the top over here and look for the Welcome banner initially we said the position was absolute and that's why it was positioned absolutely on the banner up here if we position it relatively it's going to go back to its original position we could position it using static as well I guess it's entirely up to you but you can see the original position should be if we have a look at this under the image the image is here so it should sit under the image so let me now come on here and save this and preview and now we can see if we go below 700 pixels it goes down here that looks better but we need to make this all in one line first of all so the reason it's not all on one line is because we have this br tag now we can set this to display as none if we don't want something to show we say display:none so I can take that out by doing that so what I'm going to do is come back down here and inside this media query I'm gonna grab the BR tag inside the welcome so BR and then inside that will just say display:none that's going to remove it from the document essentially so if I look now now it's all on one line okay so I'm going to align the text to the center inside this one over here so text - a line is gonna be center like so and let me move this at 1 okay starting to look a bit better now I'm going to target the h2 just to reduce the font size a little bit so let me do that font size and I'll set this to about 25 pixels save that and see what that was like okay looking all right Mario club needs to be the same size as this now so we need to get the span tag that that is in remember if we look in here this is inside the spun tag so we can just say down here banner welcome and then the spun inside that and all I want to do is say the font size now is equal to 1 M because before we said it was equal to something like 1.2 m/s we're resetting it now so 1 times whatever the parent sizes so it's gonna be the same as this 25 pixels save it and come over here and that is looking a bit better as well I think I'm also going to reduce the padding inside this welcome banner so let me say padding is now just 2 pixels like so refresh nope that's a bit too small let's change it to about 10 and come over here okay that looks a bit better so now then I'd like to carry on and this time style these things because I think at this point they should be on top of each other instead of net to each other so remember they're in a class called images we can see that down here if we go down to where the images are the UL has a class of images and then it's the Li tag over here that we want to sort out so if we go and target those first of all we'll say images and then we want the Li tag now at the minute the width of those let me just inspect these the max width of this is 100% but the width of the Li tag is 40% then we have a margin of 5% left and right so what we could do is make the width of these 100% so we only have one per row and they sit on top of each other so let's do that I'm going to say width is now 100% we need to take off that left and right margin as well so I'm going to say margin is going to be 20 pixels top and bottom auto left and right in cases any left over I'm also going to display this as block it was inline block before and that means they sit next to each other now I don't want them to sit next to each other so I'm displaying them as block again so let me save this in preview and now they should sit on top of each other which they do all right so this is looking okay let's get smaller and I think at some point we're gonna have to make the links so that they sit on top of each other because right about there they get squashed so let's do that and we'll do it at about 560 pixels so then let's do another media query let me copy this and paste it down here and this time it's going to be a max width of 560 pixels and then inside we'll just add a few styles so the first style is going to be the nerve li so that is the Li tag in sight or rather the Li tags inside the navigation so in here what I'd like to do now is set the font size to a little bit bigger about 20 pixels and I'm setting it bigger because now I'm assuming people are on mobile devices and they need more room to click with their big stubby fingers so I'm setting the font size to 20 pixels this time the position is going to be relative and also I'm going to display these as block this time not inline block so now this is on top of each other the width of each one was before 25% now it's going to be 100% width and also a margin of 12 pixels top and bottom to separate them a little bit and also zero left and right so if I save this now it's going to look a little better okay so now we can see them right here and finally going to take this at the top and remove it from a fixed position and just set it to relative so that it doesn't hide the rest of this banner and as we scroll down here it doesn't just stay at the top so let me do that as well I'm gonna grab the header that's what it is and I'm just gonna set this to be position:relative like so so if I save this now and preview then now we see more of the banner and it doesn't stay at the top the only problem is we now have this room over here for the nav but in fact it should be right at the top so let's change the top property of the nav from 106 I think it was 2-0 so it stays sticky at the very top so now if I change that let me do a rule for the nav itself and I'm going to say top is now going to be 0 okay so save that and preview and now we can see it's only when it gets to the very top that it becomes sticky awesome so there we go my friends this looks like it's all working it's nice and responsive and it's looking all right for a kind of mobile widths over here and it's also gonna look good but desktop widths as well so now we have a nice responsive website using media queries and the viewport meta tag so hopefully this wasn't too complicated and it really isn't at the end of the day you're just styling things differently for different viewport widths and we're using media queries which are really simple to write for those different widths so we have ATS media then screen then and and then in parenthesis we have the condition that could be max width or min width if you're working the other way which is often a good thing to do remember a mobile-first approach forces you to think about the content which is essential on the page and it is easier to develop this way as well so there we go my friends that is this video pretty much complete and to be honest that is the website complete as well so now hopefully you feel confident enough to go on and start making some websites yourself with HTML and CSS