Tutorial: Learn how to use CSS Media Queries in less than 5 minutes

Tutorial: Learn how to use CSS Media Queries in less than 5 minutes


Hi there, my name is Kevin and here on my channel we learn how to code the web and make it look good while we’re at it Today, I’m going to give you a rundown on how media queries work and we’re going to do it in less than five minutes! Now this is part of a new series that I’m starting up where I’m going to be looking at some important concepts and giving you a rundown in how they work in under five minutes… little coding quickies Because, you know, not everyone time to watch a 25-minute video all the time Now if you like this idea, like the video so that I know that you like it If you have any topic ideas for something you’d like to see covered in less than 5-minutes, leave them in the comments below Now let’s stop wasting so much time and let’s get to this! If you’re here, you probably know why a website needs to be responsive, so let’s not worry about the why, and jump right into the how. Media queries are used either to create new CSS rules, or to overwrite existing CSS, and in general… you already have some CSS, like I do now on the screen, and you want to modify that at different screen sizes. So with this page that I have on the screen now, I think it looks pretty good on mobile… …but as the screen gets bigger, there are a few changes that I want to make. So what I’m going to do is come all the way down to here… And media queries always start with @media, followed by parenthesis ( ), and then curly braces { } Just write this every single time so that you don’t forget anything, and then go back into it to fill it out. So in these parentheses here, is where we right our rules. So I’m going to write min-width: 600px. Currently my fonts have a font-size of 1rem, and I want them to get bigger as the screen size increases. All we need to do is write our new CSS rule inside of the curly braces here. So I’m inside of there, I’m going to select my paragraph and just write some normal CSS. So my paragraph will now have a font-size of 1.25rem Save that… and there we go! I can see that now, when my screen is smaller, the font size gets smaller, and when my screen size is bigger, the font size gets bigger. As soon as I cross that 600px threshold, it gets bigger. And of course, on top of that I can add more… so another @media ( ) { } With all my things there, I go back inside and we’re going to do a min-width of 800px And then we’ll select our paragaph again, and do a font-size of 1.5rem, and this time let’s also do a line-height of 1.5 So now we can see when I get to a width of 800px my font-size and line-height adjust Now remember, with CSS the last rule always wins. So here I have two rules defining the background of my site… purple is on top, so my background stays white…. …but if I copy, or well, if I cut that from there and move it below my other body rule, and then save… …the background changes to purple. The white gets overwritten and now I have a purple background. Now I don’t actually want a white background… …but the same applies to media queries. You always want to make sure your media query comes *after* what you are trying to overwrite. So if this paragraph rule is all the way down here… My media query is not going to do anything, because this first one is changing it at this screen size… …this one is change it at that screen size, and then that last rule is overwriting all of that, at all screen sizes, and there is no point in having any media queries. So always put your normal selector first, and then your media queries after that, or you might find that nothing is working. Now, other than min-width, we also have max-width… …if you’re doing things the “trendy” way, you know, the mobile first way, like I’ve been doing in this video… …we’re starting at a small screen size and getting bigger and bigger, so we’re adding rules as we increase the screen size. Now if you already designed your site for desktop computers… …and you’re working your way down, in that case you want to be using max-width instead of min-width. It works exactly the same way. Other things that you can focus on, other than widths, are the orientation of the screen… …portrait or landscape… You can also specify whether you want your CSS to only work for a screen, or for when someone is printing your page. Now I hope you liked this video! If you’d like more in depth information, I’ve put some links in the description below that talk a lot more about them. If you liked this video, and you liked the format of covering a subject quickly, hit the like button so that I know that you liked it. If you have any comments, and questions, or any video ideas, leave a comment down below! And last, if you haven’t already, hit the subscribe button so that you can keep getting videos like this one (and other, more in depth ones) every Wednesay! [music playing]

47 Comments

  1. Kevin, this video format is what all videos regarding learning concepts or snippets of code can be like. Thanks for the brevity and concise explanations. I learned the core concept of @media () {} … great personality in your tonality, too.

  2. I have been looking at my assignment for weeks now not knowing where I was going wrong. Amazing how a 5 minute video can clear things up so quickly. Cheers bud!

  3. Awesome video thank you for making it super fast and to the point of what media queries are I totally understood the concept and now I can move on lord willing from a problem I've been stuck on for a project for the pass 2 weeks. 😅

  4. Great video! The topics were covered so quickly and now I feel more confident in designing responsive websites.

  5. I am confused here because I started with desktop version and therefore am using max_width. How would you design one for tablets and mobile phones? I have read that I should use several breakpoints such as max-wdith 1200px, 992px, 578px, 478px and 480px but which one is for tablet? From the bootstrap, it seems that 992px is for tablet portrait and 1020 is for tablet landscape but what is 578px? For some reason, my phones don't respond to 578px but only to 478px…

  6. Hi Kevin, I hope you're doing great, i have a problem concerning my wordpress site, i uploaded a header image in my theme but when i display it on mobile device, the image cut out and i can't see the full text on the image, how can i solve this problem. thank you

  7. wow,,,,,for the first time learned about using landscape and portrait within media query… very informative video. thanks…

  8. Awesome video. Short, precise and super informative. Covered everything I needed to know about media queries without being verbose. Thanks!

  9. with all due respect a lot of people speaks as fast as they can in their videos, is it a tutorial or a talking race ?

  10. How do you get your localhost page set up so fancy like that? Where it displays the website in the middle and you can drag it back and forth to change the width of the screen? That is SO COOL!

  11. I am just starting to learn how to code and this was extremely helpful. Please please please keep posting short tutorials like this – very helpful!!

  12. I just finished learning HTML and CSS and it seems responsive web design is a must know package too. Is it important that I do a complete course on responsive Webdesign or else all these are included in the bootstrap framework.

Leave a Reply

Your email address will not be published.


*