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

By | January 23, 2020


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. Jerry Z Post author

    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.

    Reply
  2. CreativeJE Post author

    oh wow lol i was making my selection more specific now i learned that the bottom part wins thanks

    Reply
  3. Tahsin Al Mahi Post author

    Great video. Helped me a lot.
    How to open the tool you used in browser?

    Reply
  4. Taskil Mahmud Post author

    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

    Reply
  5. ooo ooo Post author

    On the one hand eluding the why is a mistake.
    On the other hand going straight to the point is an asset…

    Reply
  6. Göran Heintz Post author

    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?

    Reply
  7. Arthur Wright Post author

    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.

    Reply
  8. Alex Gerlach Post author

    "angular 7 – from beginner to pro – in 5 minutes". please

    Reply
  9. Rahul Ratwatte Post author

    Thanks a lot. Very concise yet informative.

    Reply
  10. В Ч Post author

    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.

    Reply
  11. Debmallya Bhattacharya Post author

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

    Reply
  12. Egor Lapko Post author

    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.

    Reply
  13. Ventures Post author

    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

    Reply
  14. Creative Marketing Techniques' Post author

    Thank you. Straight to the point.

    Reply
  15. B K Post author

    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

    Reply
  16. Patrick Egbuche Post author

    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💕

    Reply
  17. Patrick Egbuche Post author

    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…💕

    Reply
  18. R C Post author

    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.

    Reply
  19. MxSmack Post author

    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!

    Reply
  20. Saleh Easa Post author

    it's hard to watch the video becoz of the dark background.

    Reply
  21. Jake Thompson Post author

    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!

    Reply
  22. Sean Tivenan Post author

    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.

    Reply
  23. Ratan Khalsa Post author

    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

    Reply
  24. creative girl Post author

    hi, I like these 5min videos, straight to the point ! thank you

    Reply
  25. Shaikh Hamid Post author

    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

    Reply
  26. juuhachigo Post author

    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?

    Reply
  27. Aniket Chandanshive Post author

    Damn wow explained well 😭 I'd watched 2 hr videos and learned nothing

    Reply
  28. Bruno Alves Post author

    Thanks, documentation theres a lot, we need lightweight resumes like that

    Reply
  29. Mr Kay Post author

    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!

    Reply
  30. KidBrave Post author

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

    Reply
  31. Albert Muñoz Post author

    put it in 2x and you will learn it in less than 3 mins 🙂

    Reply
  32. canngo123 Post author

    When would you not want your css rules working on a screen? I was confused at that part.

    Reply
  33. Kristy Lee Post author

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

    Reply
  34. Samuel Stroh Post author

    Like the fast format, great job!

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

    Reply
  35. Lawal Olanrewaju Post author

    Nice video… please can you make a short video on how to make accordion using css

    Reply
  36. piano0011 Lee Post author

    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…

    Reply
  37. Sean Rhone Post author

    GREAT 5 min intro that pointed out the basics!

    Reply
  38. Ossama Harchi Post author

    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

    Reply
  39. Afsana Zaman Nipa Post author

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

    Reply
  40. Phil My Glass Post author

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

    Reply
  41. Lic. Eugenio R. Rodríguez Post author

    Excelent ! can you do one video with media queries for laying out ? Thanks

    Reply
  42. Lic. Eugenio R. Rodríguez Post author

    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 ?

    Reply
  43. christian aruogu Post author

    Very nice and informative. I will Like to know how to get the screen size on display. Thanks

    Reply
  44. Hamza Khan Post author

    U r an amazing instructor man….. Thanks….. Subscribed ❤️…..

    Reply
  45. Bacaweb Post author

    dude! by the way that you explain it, I get it in 1:49min you are awesome! thanks a lot! you have any other 5min series???

    Reply
  46. Fainted Post author

    Someone pls tell me what program he is using to test the different screen resolutions

    Reply
  47. David Mclean Post author

    AWESOME! This helped so much now I know where I'm going wrong thank you. Yes, the long videos are too much for idk.

    Reply
  48. Saurabh Prakash Post author

    Your speed of content delivery is just so right. Thanks a lot.

    Reply
  49. YumYumOrYuck Post author

    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!

    Reply
  50. Siju V Post author

    Hey Kevin, you are just awesome man.. Good Work.. Keep doing. Thanks for the video.

    Reply
  51. Samuel Chaparo Post author

    <p class="yourule!"> Thank you so much </p>
    .yourule! {
    font-wight: bold;
    }

    Reply
  52. Lucas de Souza Post author

    Awesome video! you solved my problem in less than 5 minutes. +Subscriber!

    Reply
  53. Ty Jenkins Post author

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

    Reply
  54. Paul Elton Rodriguez Post author

    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.

    Reply
  55. Romero Lucas Post author

    I can't usa Media Queries, so… i'm using javascript to make responsive design. Do you think this is wrong way?

    Reply
  56. Serpent77 Post author

    Thanks for this Kevin, had to be reminded of a few of these points the hard way recently while working on a project.

    I was wondering if you could do a quickie video on tabular data with fluent designs, should I use tables, or get fancy with flex or grid? I've tried both and tables are great, easy layout, easy styling, until it's time to change display sizes. Doing mobile first leads to anemic looking tables on desktop, doing desktop first just ends up making tables that break the design on smaller layouts. I'm trying to figure this out with grid or flex right now and its introducing it's own problems, just curious how you might address tabular data with pagination, I almost never see anyone discuss this in most tutorial videos, but it's such a common need. Thanks for your consideration!

    Reply
  57. Bot 28_ Post author

    5 MINUTES, 5 MINUTES . HE DID IT IN 5 MINUTES AND EVERYONE GOT THE POINT, DUDE YOU'RE COOL

    Reply
  58. Beharrilal Post author

    Can u do mediarule which creates a responsive navigation menu which can be displayed

    horizontally on large screens and vertically on small screens

    Reply
  59. Jelte Hoekstra Post author

    yo dude, i'm normaly a bit more of a backend guy. But i had to do frontend for this project that we have atm. This explained everything i need. tnx and the best to you 😀

    Reply
  60. Jesus Is Lord Post author

    Thanks Kevin for the info.
    I'm building a website which include a slide. However, it only shows the images lined up vertically on the page when I include the media queries, but the images float to left for the slide to work when I delete the media queries from the CSS.

    Also, when I keep the media queries, the slide doesn't work in desktop view, but works when I scale it to mobile view.

    What might be the reason?

    Reply
  61. Romel Madray Post author

    Good Overview – But needs to link into a longer video covering each of the areas covered with examples

    Reply

Leave a Reply

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