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

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]

100 thoughts on “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. Bit late to the party here it seems, but really enjoyed the concise nature. Quick, brief and to the point. Much appreciated. keep it up.

  3. came here for info on media queries. ended up learning something about the css heirarchy "the one on bottom always wins" invaluable information for me. I'm self taught. Thanks for the video !

  4. Just recently started learning about responsive design and this video although covering a relatively basic concept still helps tremendously! Thank you!

  5. Hi Kevin! I would really appreciate a short tutorial on how to resize images to use on my website. Such as, what size should images be and how many KB they should be, and what are the most used image sizes. Maybe use GIMP or an image editor that you like best. If you could cover a range of image sizes, that would truly be helpful… cheers!

  6. Forgive a newbie-Q if it is… I am still looking through your videos but here is what I am looking for ATM. Can the value of a min-width be set to a number that is the width of an existing element in a page? For example, I have a row of navigation tabs that may vary from page to page. I would like that row of tabs to switch over to a drop down menu when the screen is too narrow to display the whole row out-right. I already know how to do the drop down, I am just looking to alter that min-width value in a line "@media screen and (min-width: xxx ) {…}". Am I off base or have you already explained it? Do tell!! If you've got a cool trick or even JS, I am just looking for some method.

  7. I didn鈥檛 quite like this format. You seemed rushed by your time constraint. It seemed as if the video was sped up and hence even your voice seemed slightly higher pitched.

  8. I love you style my friend i wish there were more people like you who just cut straight to the point genuinely wanting to help when i get better in this business i will hope to do the same

  9. Dammm bro this is my first video from it channel ….. Just watching this video I subscribed u
    This is the info I was looking for super beautiful AF
    THANKS A LOT

  10. I was trying to use this to hide some text on mobile only using @media (max-width: 768px) {

    /* For desktop: */

    footer-riba{

    display:none;

    }

    }

    but it did NOT hide this image under any resolution. Did I write something wrong?

  11. 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.

  12. 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.

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

  14. 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.

  15. 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

  16. 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

  17. 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馃挄

  18. 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…馃挄

  19. 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.

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

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

  22. 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.

  23. 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

  24. 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

  25. 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?

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

  27. 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. 馃槄

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

  29. Like the fast format, great job!

    Keep doing short and precise tutorials馃檹, new subscriber here 馃槉

  30. 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…

  31. 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

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

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

Leave a Reply

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

Back To Top