Video Summary

Alright, we are going to cover the examples in the slides for media queries. So you can use the links that I provided below this video to click on and just go right to W three schools and go to this exact page. And the reason why I’m using the W three schools over code pen is that allows us the flexibility to change the width of what we’re looking at. So it’s very similar to what code pen was, but we just have one long, kind of HTML Boilerplate example over here and then in this section, it displays all of the HTML we have here and the stylings that we created. So let’s just kind of hop in, I’ll break this down. I know we’ve covered over kind of boilerplates before but let me just kind of review this real quick. So the way this HTML is set up, and you can still do this, but we changed it to the CSS styling sheets, so we can separate our stylings versus our HTML is right. 

But with this example, or how the W three schools are set up, is that we have to put in all of our CSS values right up in here. So that’s why you see the in-between these style tags. So if we look over here, and this section, we are targeting a div with a class of example. So if we look over here, we can see that we have the class example and example div, right? And that’s what we’re looking over here because it’s saying that we got a yellow background and we have a padding that’s 20. And since that’s the only thing with the yellow background, it’s easy for us to know that this is a section that we’re editing. Now, when we’re in style, we have the CSS style, and that’s just standard for the whole page. But when we come here, we’re saying at media screen Max bliss, so 600 pixels and below. We do not want to display this div. So if you look over here, you’ll see the result size, and what it is, is you’ll have 826 pixels, so that’s width by 785 pixels, all that’s height. And as you, if you look at the pixels, as I move this bar, you can see that you know the width is changing. So what we’re gonna want to do is we’re gonna go we’re gonna slide all the way down and we’re gonna go to 601. 

And then as soon as we six sit or hit 600 We are not displaying that element anymore. And this is one of the more popular ones are not popular, but this is the one that I use the most because when we’re working with a WordPress theme, not every section, not every feature of every element is going to be necessary when we go into smaller mobile devices. So it makes it a lot easier for me just to target a whole section a feature or a photo and potentially just don’t display that when you hit mobile devices, but it might still work and be very functional for tablets, and desktops, right? So this is how we’re able to target this. Now. We can do the reverse on this as well, which actually we’ll just hop over to this one because this is a better example of the min-max, right? So if we’re thinking about this, this is pretty much almost the exact same as the previous example. And I’m just gonna write this down is that we have the div we have the class that’s an example an example div. Right here. Alright, what if we look over here, the div example is where we’re saying that the background is light gray and we have 20-pixel padding. But now if we go here, we see that there’s a min-width and max-width media screen query. So with the men with the same as that from anything from 601 and above, we are going to have the font size to be 80 pixels. Now Max with a Sans 600 and below will be 30 pixels. So if we just come over here and do our slider, and we get to let’s get down to our 601 Go to 600. Boom, we go down to 30 pixels. And again, this is a really smart move when we are trying to optimize for mobile devices because if you look at this, this would be a very large font size for a mobile device. Like that’s like that would be taking up too much real estate. It’s kind of over-emphasizing what this title might be. And really when you get down to mobile devices like having you know a smaller font will work a lot better, and you’ll be able to fit more content onto the same screen size. 

As if you’re able to lower your font size as you go down with screen size. 

So here’s kind of a cool example too is is that what we’re showing you here is that we’re basically saying the cutoff point is 600. And we’re saying 600. Below is one font size 600 and above is another well what happens if let’s say we just get rid of this media query, and let’s just try to put in, let’s say font size? 

We were saying the regular font size, is let’s say it’s 100 pixels. 

So now if we click run, get the click up here. And now if we move this back, past, right, we’re still getting kind of the same thing, right? We don’t necessarily need to claim that at 600 or above, we’re going to use, we want this to be 100. We could say every, we want this element to be at 100 pixels at all times and then come in with our media query and say well actually we want from 600 and below, we want 30 pixels, right? And what we can do too is you can enter multiple min or min maxes so let’s just say we entered down give us some space and we put another one here, but instead of say 600, and below we want to say again 400 pixels and below, and maybe we just want a font size of 10. So let’s come up over here. Let’s click Run. 

Alright, and now if we come over here and slide, let’s just say we get to 600 right here. Now we’re at 30 pixels. And now if we slide past 400 Right now we’re at 10 pixels, and you can do and you can switch this as well and say well what if we do min. 

So we do min and we click Run. Now what we’re saying is that for 401 pixels and above we want 10 and for 600 pixels and above we want 30. So basically so now we just kind of did the inverse and let’s just slide this over and see how this looks. 

We’re we have a kind of flip flops, right so so basically we’re saying like this is overriding this one. So kind of like the lesson is, is that when you’re in here and you’re playing around with stuff, you know seeing which one is going to work is that you can play with the regular styling, right? So you have the regular CSS that you kind of have overridden that for this example, you have 100 pixels right here from the low. And if we change this back to the max, right, and we say we start running this. Now what we’re saying is that from 400 and below that’s 10 pixels from between 604 and 100 is 30. And everywhere else is 100. So that’s more of a standardized way that you would go about it because you’d want to have your regular stylings be fairly large. And as you go down in screen size, you can create your font size just a little bit smaller and a little bit smaller. And now let’s cover the one last that and this is an basics kind of almost the same thing as well. But let’s just say we come down here. 

And what we’re seeing here is that this that this element here, the div example, that we want the font size to be 50 the padding to be 50 pixels, the border to be eight pixels, solid black, and we have a background of yellow, right? So now if we come over here we’re at 825. What happens if we go to past 900? Now we don’t have any stylings, because there’s no styling on this page, besides just this media query, let’s say in between just 906 and 100 pixels, right, but now what happens if we go below 600? Now we have nothing. And this is a good example of how to let’s just show you where between like these two, these two sizes because what happens a lot is that you’ll have tablets that you’re trying to optimize for. And tablets can be a bunch of different sizes, but it’s in a range where a lot of the same styling is gonna work for the bigger tablets and the smaller tablets. So specifying this range really works, but I think that to have a more practical example let’s just copy and paste. What I’m copying and pasting right here is the actual standard CSS but we’re not targeting any screen size, right? So I’m gonna, what I’m going to do here is I’m gonna do blue, and then I’m just gonna add color white and I’m going to click Run. And what happens is, is that this is this color is white, because we’re not specifying it down here. And if we go a little bit larger, now that becomes blue. And now if we go below 600, the background becomes blue, right? And now what we could do here is then add color, black. 

So now we just have kind of alternating bright colors, you know, white font, or like dark color, white font, bright background, black font, right? And as you slide back and forth, everything changes because we’re targeting different stylings in between this range. So this is another good really good way to optimize for selected devices. Or if you just have a section of your website that is really bugging out between a certain range then you can use this to edit that styling. So I think we’ve covered over everything we really need to I would say when you actually get into and you’re starting to optimize your websites or you’re playing around with stuff, just play with the min-max and see what works for you. See what kind of styles you want there’s really no right or wrong answer and a lot of the stylings end up becoming subjective near the end, but for instance, if you wanted to say if you want is if you wanted to have to say, a 500 pixel and we run this at any anything below here, or above here, right like that’s, that’s objectively you can’t do that because it’s too large. but when you’re talking about just in between 45 pixels, and 50 pixels, what color do you want? Those are things you just have to play around with and just see what works on each screen size. So, um, with that being said, I think we can wrap up the meeting first and go on to the next lesson.