Video Summary

In this section we’re going to cover CSS media queries. And media queries allow us to use CSS stylings on HTML elements depending on the size of the screen you were using. So this comes in handy when we’re trying to optimize for sections of your website for mobile devices, tablets, smaller laptops and notebooks and even desktops. So if you think about when we’re building a website for a desktop, or you’re looking at a desktop or a website from your desktop, there’s a lot more real estate than then say when we have a when we’re looking at a website for a mobile device or a tablet. And so when we’re going through and we’re developing, we’re going to want to do certain things run and want to change certain font sizes, we want to might change some padding or some margin sizes. And we might not even want to display a certain element at all right? So let me just go through and quickly explain the syntax everything kind of strategy behind it. And then we’re gonna hop over to WP school because that gives us a better editor to really play around with the screen sizes. And then we’re going to show you how you can utilize this media queries to mobile optimize every section of your website. So we’re looking at here is we got at media screen so basically what we’re seeing that statement is, is that we want to have, we want the max width of this declaration is 600 pixels or below. So like max width, is 600 pixels. And what we’re doing is we’re targeting just a regular CSS element. 

So if you think about we were saying we’re targeting a div and a class that says example, and we’re and then in this example right here, we’re saying that we don’t want we display none. So really, what we’re having is we got at media screen and Max was 600 pixels, and we got to open brackets right here. So we’re open that up to then place our CSS code that we want between 600 pixels and below. And display none is very popular not popular, but it is used fairly frequently because some things you just don’t want to be displayed on smaller devices because it’s just taking up too much room. And it’s kind of just clogging up the flow of the functionality of the webpage rent. So now I’m gonna go into a little bit more in-depth because you can use max and min width views for these media queries. So for a min-width like so what we’re saying here is that the screen size is 600 pixels wide, or more, or that’s more than 600 pixels wide. So technically what this is saying is that this at 601 pixels, the font size would be 80. 

Now for max width. It’s like the example we have both before is that saying 600 pixels wide or less, less 600 and below, right, so basically what we’re doing is we’re targeting the 600 pixels. And we’re saying everything above, this will be font size 80 and everything below this will be font size 30 And this makes sense too because we’re thinking about a desktop, you know, you’re going to have more real estate so you can have your font sizes be a little bit bigger so they’re easier to read. You know have different call outs be able to pop a little bit more, but having your font be 80 pixels on a mobile device might just make the font size so large that takes up maybe a fourth of the actual screen that you’re looking at. Right. So you’re gonna want to be able to say I want at this screen size, I want to have this font size be larger, and then at the end then when you go to mobile, you want it to be a little bit smaller. 

Now there’s one last media query that I do want to go over that we can use and this is a very helpful tool to use when you are optimizing for certain device ranges like tablets or notebooks. And this what we can say here is that what we’re seeing at the media screen between 906 100 pixels, right, that when we open this up, right and we can place our CSS that we want to for this, this element and this class that this will own like this, styling right here will only be seen between these two, max width and min-width. So that can be very helpful because some tablets can be you know, right around maybe 600 pixels, and maybe some of the larger maybe like iPad Pros might be more like around 900 or 1000. So being able to get a specific width that will work for all tablets can be pretty beneficial. So I think we’ve covered this pretty well I think that you know again, we’re gonna hop over into w three schools and I have the URL for each section and you can click on the links below this video as well, and you’ll be able to hop right in and go to this demo. So with that being said let’s hop over and start playing with these examples.