HTML5 and CSS3 Responsive design with media queries

HTML5 and CSS3 Responsive design with media queries

April 30, 2019 26 By Bernardo Ryan



hey YouTube how's it going it's Quinton here and welcome to my responsive design tutorial and I decided to make this video because there were quite a few guys that requested this on Facebook and also in the comments section below my videos so if you guys want to request the video go ahead and follow me on Facebook and Twitter the links are in the description below and I'm going to do my best to help you guys and if you guys want to know how you can help me then leaving a comment liking or sharing the video is really going to help and also if you watch the video the entire way through on YouTube instead of downloading it and watching it on your computer that helps me with something called audience retention but I do understand that some of you guys watch the video download it and watch it because Internet can be expensive in some places or some parts of the world so I do understand if you do download these videos it's just it's much better for you to watch the video on YouTube because it helps me okay but let's actually get started with this responsive design tutorial okay and I've got some content on the webpage already so that we can save time but it's not really complicated stuff it's just a div with an ID of container and that div with the idea of container has two style rules the width is set to 960 pixels and the margin is set to auto okay so what this means is we have a 960 pixel container that is centered in the middle of the browser okay then taking a look at what's inside this container we have an image which acts as a banner and that takes up the entire width of our container and I'm going to show you guys what that image looks like in just a second then we've also got our section which is has an ID of left column and that has just some left column dummy content same thing with the right column this is an aside tag with an ID of right column we take a look at the style rules for those we've got a width of 700 pixels and the left column is floated left the right column has a width of 260 pixels and it's also floated left which means that it appears next to my left column and two hundred and sixty pixels plus 700 pixels is equal to 960 pixels so these two columns when appearing next to each other take up the entire width of my container okay then I also gave them background colors just so we can differentiate between the left column and the right column so if we run this in Firefox okay you can see we've got this big banner at the top of the page and then we've got our left column and we've got our right column so in order to make this design responsive we're going to take a look at a new tool in Firefox so I'm going to go to tools web developer responsive design view as you can see the keyboard shortcut is ctrl shift M so go ahead and hit that and you'll get these little handles on the side of the page over here that you can use to scale the actual screen size and there's also a whole bunch of presets up here and you can use this to kind of determine how your website is going to look on certain screen sizes like a phone or a tablet etc okay so now let's go over to a notepad and in my index file I want to add a meta tag now this made the tag you probably don't need when you're working on your computer designing and testing this but if you do want your phone or your website to respond on a phone and actually change sizes then this meta tag is necessary so go ahead and add in this meta tag so meta and give it a name of viewports and by viewport we're talking about the actual screen size and we're going to say content is equal to width and this is actually quite a long story here but width is equal to device width comma initial scale is equal to 1.0 okay and it needs to be just like that now by doing this we're telling the phone or we're telling the iPad or the tablet or whatever is trying to access this website that the content needs to be equal to the width of the device width okay so whatever your phone with is that is the width of this website or that's the width that you must display for this website okay and the initial scale of 1.0 just means do not scale this website up or down to try and fit the content just the content is actually going to fit the actual device so let's go over to CSS now and use something called a media query to make our website respond to phones and stuff so to use a media query you're going to type in the word at media screen and open up brackets max width and 900 well I'm going to yeah I'm looking at my notes but I'm focusing on that at the same time so I'll explain why I'm going to put nine hundred and fifty nine pixels in here in just a second but I just want to mention to you guys that your code needs to look exactly like that okay if you try and leave out a space so like I left out a space like this the website doesn't work anymore doesn't respond so this thing is so fussy that even the spaces have to be correct okay and I'm going to give this a max width of 959 pixels and basically what we're saying here is as soon as our website gets to 959 pixels we are going to display whatever CSS rules are inside of this media screen and the reason why I'm using 959 pixels is because my container is 960 pixels so everything bigger than 960 pixels is going to display my web page like this so we're going to have the web page in the middle and it's going to be centered but as soon as we get to 959 pixels you can see we start cutting off part of our web page and we want to try fix that so 959 pixels we're going to make our website start scaling so we're going to grab this container over here and instead of the container having a width of 960 pixels we just want this container to take up the full width of whatever the screen width is at that time so we're going to say with 100% okay and this means that whatever the screen width is this container is going to go ahead and try and fit that width okay then I'm going to grab this left column over here and we're going to give this a style rule as well because we don't want to work with pixels anymore we need to work with percentages so I'm going to grab this width and I'm going to give that a percentage of 70% and what that means is this left column now takes up 70% of whatever width is left for it to take up and we're going to do the same thing with the right column so I'm going to copy that and just paste that down here okay and I'm going to give that a width of 30% because we want the left column and the right column to still appear next to each other because they're still going to be floated left because of these two rules these two styling rules okay and seventy plus 30 is equal to 100 so these two columns will together make up 100% and take up the entire width of our container so save that now jump over to Firefox click refresh and as you can see now when I start scaling this my left column and my right column start scaling along with the actual webpage so this is pretty cool but my image as you can see is still getting cut out in the background and we need to fix that so I'm going to go back to notepad and I'm going to grab this image by its image tag so image and I'm going to give that a width as well so width of 100% and this means that our image can only be as wide as the container that it is within and our container over here also has a width of 100% so if we go over to Firefox click refresh and start scaling this down now you can see our image scales with the web page so we now have a responsive website which is pretty cool but what happens when we get to like a really small screen size over here you can see that we're now only fitting maybe like two to three words per line and that's not great in this column so it would probably be better to make this column appear beneath the Left column okay so in other words they don't become left and right columns anymore and to do that we're going to grab this media screen rule and for the width I'm going to set this equal to hundred and forty pixels so this rule kind of works for all the tablets because anything smaller than 959 pixels will scale down and this will work for all pretty much all of the tablets but for this rule over here sorry squeaker for this rule 640 pixels is pretty much the same region where we start working with phones like the iPhone 5 or the iPhone 4 and some Android phones like the Samsung Galaxy s3 or s5 or something ok and for this we want to actually make these columns over here appear beneath each other so I'm going to grab these two columns and I'm just going to paste them down here and if I give this a width of 100% and I give my right column a width of 100% then it means that 100 and 100 are now bigger than the actual container so these two will appear beneath each other instead of next to each other so if we go over to Firefox and we click refresh over here and we start scaling this down watch what happens when we get to 640 pixels so I'm going to scale this down and there we go as soon as we get to 640 pixels those two divs or the section and the aside start appearing beneath each other okay and as we scale this down they just get thicker and thicker as the content scales to fit as well okay and you know that's pretty cool but what happens if for some reason the screen goes like that now we've only got one word per line and this is you know pretty stupid in my opinion and I think the smallest screen size that we actually really need to cater for is around 320 pixels which is about here okay and 320 pixels is basically like the old iPhone 3 and those kinds of phones so once we get to 320 pixels we don't really want our website to scale down any further because it just starts looking pretty bad so in that case the user will have to use their thumb and you know try you know maneuver around the website or scale the website as such okay so I'm going to go back here and we're going to create another media of screen rule and I'm going to for this just give my content my container a width of 320 pixels so ctrl V so when the screen gets to 320 pixels we want our container to also have the exact same width of 320 pixels okay and what this means is that the website can be no smaller than 320 pixels so if I click refresh over here and we start right from a fresh we've got computers and some of the bigger tablets we'll see a website that looks like this as soon as we start scaling it's smaller then iPad minis and some of the smaller tablets would display a website that looks kind of like this and when we start getting two phone widths then we've got websites that look kind of like this with the columns appearing below each other and the smaller we go they just keep going to fit until we get to 320 pixels once you get to 320 pixels your screen is too small to fit our content buddy so we're going to make our content stay exactly the same size and you will just have to use your thumb or whatever to actually maneuver around the website and try scale it wherever you need to go but like I said not many screens are smaller than 300 20 pixels so we don't really have to worry about that too much and that is all I have for you guys in this video so if you guys like this then don't forget to leave a like on the video below and comment and also share this video it's really going to help my channel grow and I will see you guys next time