Adding our first media query

- [Instructor] The first thing to realize about responsive design is that our content stays the same. Of course it doesn't really matter what size of the page we have, we still want to see portfolio, about, contact, and all of this work. So how do we think about content versus look and feel? So remember that from before, like on the previous lessons we talked about the content and style being in HTML.

So, that means, when we talk about responsive design hence design, we talk about look and feel of things. When we want to change the look and feel of things, we don't change the HTML. What do we change? We change the style of the page. So for instance, if I want to change the style from background color of black into salmon, let's say, I just change this color and it'll change everywhere.

Doesn't look too good, we'll change it back. But what we're going to talk about is how we add in responsive design work. So, to do responsive design, what do we need? We're going to be using a tool called media queries, which is part of CSS. And basically what media queries does is it modifies your size depending on certain things.

Now those certain things could be things like is it print on screen? But the main one is gonna be screen resolution or browser width. So we wanna change things based on the browser width. We want to overwrite things based on the browser width. So, how do we do this? Well again, we can look down this page and we can kind of see the instructions here.

That's quite a lot of things in here. We're gonna make it in a nice simple way. And a nice simple way we're gonna use is this @media. We're gonna use some brackets to basically tell it what to listen for, and then do something with this. So, we're gonna make this easier than what the document's look. So the first thing that we need to work out is well let's just change something.

Let's just change something when it's a certain size. So, I'm gonna go right to the bottom of my style.css, so right at the bottom. Now, the reason I'm going right at the bottom is because everything currently above my cursor up here is the desktop version. And when I go smaller, I want to overwrite things.

So basically, further down here, I want to overwrite things. Now, just to give you a quick example of this, let's say I wanna change my background color from back into red. Now I could just change it here, but I can also overwrite this. I can take this body style which is the general page style, and just overwrite the background color to a different color like red or salmon.

So, here is a quick example. So if I go to the bottom and just say select everything on the page and do something to it, make the background color red. What that will do is it will overwrite the thing above it. And that will mean that this is pretty ugly, but we have a background color red.

It doesn't matter what size the page is, but this will always be red. But what we want to do is say well maybe we wanna have it black at a certain width, and then white or red at other widths. So we need to add some conditions in here. What conditions? Well, when my page is a certain width or height or with its print or screen, then I want it to do something.

And the way that we do that is using these media queries. So, what we're gonna add in here looks a little bit like this, but dependent on something else. So, similar to what we had in HTML, we had something like a nav inside a header. We can have some conditional styles that are in a condition. So what we want to put in here is some check.

If it passes the check then we change the body color to red. So this at the moment is always on, it just runs everything on this page and this is the last thing that it listens to and then it's red. So now we're just gonna get rid of that, we're gonna put something very similar in in a second. So here, right at the bottom of my page, I'm gonna write @ and then the word media, and then I'm gonna use round brackets to say well I wanna do some condition here.

So what do we wanna check for? Well, what I wanna check for is the width of the page. And I want it to be a maximum size. If it's beyond the maximum size, say it's smaller than a certain size, then I want it to be red. So what I wanna listen out for is is this page have a maximum width? If it does, then be red. So, I'm gonna say max-width: 600px.

So I don't need the semicolon there, just the colon in here. What I'm trying to say here is if my page is less than 600 pixels, so 600 or less, then I want to do something. How do I do something in CSS? Well I move my cursor over here, add a space, and do some curly brackets. So the round brackets are doing a check, and if the check passes, we're gonna do something using curly brackets.

So the curly brackets up here means pick this and then do this to it. Here, we're saying check for a certain width. If it's okay, do something. What do we want to do if the page is less than 600? Well what we want to do for now is just make the background color red. So in here, how do I do a style? Well, all I would do is body, curly brackets, and I'm gonna open those up.

So here what I have is very similar to what I have in my index.html. I've got nested things. I've got a nav inside my header, it's kind of grouped. Here what I'm doing is a group with a condition. So this is the condition of the group. The group is saying "If this is less than 600, "do this body style." What do we want to change on the body style? Background-color is red.

So this is my first ever media query, it's basically saying turn this on and off depending on the width of the page. So let's go and see this in action. So if I go to my preview right now, you might notice there's this little dot up here. So if I move this thinner than my dot, so currently all in black, and as soon as it hits 600, it goes to red.

So this changes the style of the page based on this condition. So generally how most sites do this is using media queries. If you see a mobile friendly version of a website, they'll be using exactly the same technique. Now for us of course we need to change this page a lot more than just turning the background red, but we've made our first media query. We've added a little bit of code, and it's conditional.

If the maximum width of this page or below is 600. So think of this as almost like a maximum height bridge. If a maximum height bridge is 15 foot, then 15 foot or less can go in here, here's what we have in the same way. If the browser width is less than 600, the background color is red.