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 thoughts to “Tutorial: Learn how to use CSS Media Queries in less than 5 minutes”

  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. Like the fast format, great job!

    Keep doing short and precise tutorials🙏, new subscriber here 😊

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

  4. 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. 😅

  5. 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!

  6. Thank you, this was exactly what I needed. I was struggling with the whole concept, but yhanks to your video I seemed to grasp it very quickly… I just have ONE stupid question… what do you put in the HTML to make your media query specifications work?

  7. How can we remove margin and padding which I have given in full screen if I want to remove that margin and padding in mobile mode like in small screen in media query

  8. Tip for using the "orientation: landscape/portrait" rule:-
    The orientation CSS media feature can be used to test the orientation of the viewport and NOT the device orientation. Opening the soft keyboard on many devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait.

    Source (and modified from): MDN documentation

  9. The one line that changes everything "the last rule always wins" Untill I heard this I spent hours getting nowhere Thanks great tutorial !! and nice a sucsinct.

  10. Huge fan of your content, but I don't care for the speed on this video. I understand you want to keep it short and concise, and I think you should, but if you slowed down just a tad on your speaking I think it would help, even if the video ends up a little longer. Thanks for all the great videos though! Keep em coming!

  11. Great video Kevin, I do understand media queries and how to use them what I'm not sure is if there are any patterns to define and work on breakpoints or if it is always a grind. Thanks!

  12. so many that show this are an hour long and they key punch all the html etc etc…I just wanted media queries and you delivered.

  13. Pls how do you query a site to be responsive at 300px. I made a video to be at the background and want the page to be an image when minimized to 300px. I targeted the image in the body with the <p> tag. Went to my style… Wrote @media (min-width: 300px){
    p{
    Background-image: Cover;
    }
    }

    But it didn't happen, rather the image was just in the background instead of it being there only When it's at 300px. Pls help me out sir. I love code but when its hard i tend to loose hope… Pls help me out…💕

  14. I have been searching for a 5mins channel like this… Finally i found it… Please how do i create Navigation bars in 5mins, place help me… And can you give me an advice in coding. I love it but it seems like the more i go farther into it the lesser i love it… Pls help me… Thanks💕

  15. when i inspect my webpage the media queries don't kick in. WHAT is up with that? They're all the way at the bottom of my style sheet. @media screen and (max-width: 767px){} and @media only screen and (max-width: 767px){} don't work. I set the view port meta in the html. I'm LOST lol

  16. First of all, thank you for sharing this valuable information. I really appreciate the approach you took – giving concrete, practical information about the real ins and outs of web development. I am curious about one thing though…

    When you spoke about having media queries at the end (last) of your css I Immediately wondered if a person could conveniently place all media queries in their own separate file (have multiple css files linked in) and just make sure that linked file is coded last among it's siblings?? Don't html load css from top to bottom? And would that work or is there some right way to do that? I sure would be nice to have that separation just for code clarity and simplicity sake.

    –Thanks Jake

  17. Wow, awesome. The effectiveness of these four minutes is many times greater than the effectiveness of hourly vids of the same subject. Thank you kindly.

  18. This is too basic Kevin. You could add some complex concept which developers usually struggle with.

  19. Hello Kevin! I think most people wished to learn @media in depth; for instance, the recommended article by Chris Coyer says we can actually use both @media rules: max and min-width. And we can even use and, commas. So could you make some in depth video on @media ? When shall use both medias; most importantly, how shall we use them, if the last rule always wins? When and why shall we use a particular width? Why did you use in this video 600 px min-width not 300 min-width? Sincerely, S.

  20. Thanks! This is just what I needed.
    Now to see if you've maybe done a video for responsive navbars? PS: could you perhaps shed some light on the navigation (animation?) Used on creativeboom.com's mobile site? I think its really stunning and so different.

Leave a Reply

Your email address will not be published. Required fields are marked *