Web Development Tutorial: How to Implement an HTML Responsive Website with CSS Media Queries
Let’s talk about CSS media queries in this web development tutorial. And if you’ve never heard of what a media query is, that’s perfectly fine. We’re going to start from the ground up. A media query is a tool in CSS that allows for us to implement responsive design elements. When I say responsive, what I mean is what I’m going to show you right here. I have two nearly identical sites. One is responses and uses media queries, and the other one is not. We’re going to walk through, after this demo, we’re going to walk through the code and we’re going to implement a full media query for this homepage. Let’s first look at a media query based site. If I open this up, what I can do is it looks good on desktop and then if I were to access this on a mobile device, which I can mimic by just bringing this down here, you can see that the entire site readjusts. This is what someone coming on an Android or an iPhone would see. You notice how we have the logo has readjusted. It’s now at the top. And then we have the navigation elements are stacked on top of each other. And then the same thing with the contact information.
Then everything else has also readjusted. This is looking really good. This is the kind of experience you’d want to see on a mobile device. Now, if you open up a site that does not have the media query though, and then try to perform the same action, you’re going to get very different behavior. Notice now, if I take this down to the same size, that it does not readjust. Someone accessing the site’s going to load it up and they’re going to see this distorted looking page. They’re going to have to scroll to the right. A bunch of things are kind of shrunk in and overlapping. This is really not a good experience. This is the reason why media queries are so powerful. Now that we have a good idea on what they are, let’s walk through how we can implement them.
I have this page open and I have the code open for it right here. I’m going to start by creating a new style sheet here called media queries. This isn’t necessary, this is just because I want to be able to have all my media queries in one spot. It will also be easy for us to see them. Let me open that up and in the styles directory, I’m going to save a file called media queties.css. Then here, we’re going to be able to add all of those. Now, the syntax for using a media query is … it looks a little bit different if you’ve never used it before. It starts with a @ symbol. Then you say media. Then this is a method or a function. That means it takes an argument. The very first thing that we have to provide is the breakpoint. If I say medium max-width. Then I’m going to use 615 pixels. What this is going to do is this is going to say that whenever we have a screen that is below 615 pixels wide, which is a pretty standard size for using with smartphone devices, then I want you to apply these styles.
Now, whenever you’re using media queries, a trick to make sure that you are following is your media queries should be at the very end. They should be the last styles that you include. The reason for that is because if you have media queries and then you call other styles after that, they will override it. You need to make sure you call that at the very end. What this is going to do is the browser’s going to look, it’s going see all of these media queries, and it’s going to check and say, “Okay, these are the styles I am going to apply, and I’m going to run these if the screen is 615 pixels or less.” You could do this for any of them. Let’s just test this out.
If you look at the index here in the navigation wrapper, you can see that we have navigation wrapper and then we have all of these items inside of it. We have a left column, a center column div, and then a right column. I think this is going to be a great place to start. If I say navigation-wrapper. Then inside of here, I’m going to change the flex direction. Instead of having the default row, I’m going to change it to column. Then I also want to update the height so it’s 100%. Let’s see what this does for us on our site that previously was not working on mobile. Let me open this up in a new browser window. Now, if I shrink this down, you can see that when we hit that breakpoint, you see how this got readjusted. Before, that was not working. Before, it just simply went to the side and then it didn’t shrink down and it didn’t stack it on top of each other like that.