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

Start creating responsive layouts with confidence with my free responsive layouts course: courses.kevinpowell.co/conque...
Quickly learn how to using CSS media queries. In this video, I explore what media queries are and how you can start using them right away.
If you know how to write your own CSS, you'll be able to figure out media queries pretty quickly! All you need to do is assign new CSS rules at specific screen sizes.
This is just a brief introduction, but it should be enough to get started in the world of responsive web development.
If you're after a little bit of extra reading about CSS Media Queries, here you go:
@media - CSS | MDN - developer.mozilla.org/en-US/d...
Using Media Queries - MDN - developer.mozilla.org/en-US/d...
CSS Media Queries & Using Available Space | CSS Tricks - css-tricks.com/css-media-quer...
--
New to Sass, or want to step up your game with it? I've got a course just for you: www.kevinpowell.co/learn-sass
--
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell/

[@fahrurrozy3341]

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

[@Ca2le]

holy crap i have been on a 4h course about this and you explain it in 5 minutes, and better! thx

[@KevinPowell]

Haha, hopefully it just helped things from that 4 hour course click, lol. Glad it helped you out!

[@JaredNichols909]

That’s because Kevin clearly cares about his audience and the content he articulates. A lot of other instructors just want to make $$ or draw lessons out to appear more valuable, imho

[@nivaech]

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.

[@arabelllaxo]

aah, you're brilliant for this! im in college taking a course for css and have been learning abt media queries, but it wasn't really sticking for me until I found your video. I literally spent hours watching the college course video but I learned more from your quick 5 min video. for some reason I learn better when it's quick & to the point. thanks again:)

[@zinxderobo]

Thanks Kevin, I honestly think I'm learning more from you than my instructor in my full stack class. I appreciate it!!

[@kelartis]

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!

[@tyjenki]

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

[@riyagoswami4925]

Loved this '5-minute' format! Although I have been following your other tutorials for responsive webdesign, I had a 'quick question' and got the 'quick-answer'.

[@seantivenan9593]

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.

[@scriptonly8728]

It's so hard to code most of the time, I don't even know why I'm doing it at this point.

[@seantivenan9593]

@@scriptonly8728 the thing is you bang your head on the wall for a week, then it all falls into place and you wonder why it ever seemed so difficult! Thats why you can keep going the successes get you there 😂😂

[@perrykim7810]

This is exactly what I was thinking.. I almost gave up until I found this video and comment. 🤣🤣

[@Lurchstavo]

@@seantivenan9593 that was me learning traversals in JavaScript.

[@sourabhvaishnav8235]

As soon as the video reached 3 minutes I hit the subscribed button. I was thinking media query is something very huge and monsterous but hey.....you explained it in simple simple words. It's actually people like you who make programming fun. Kudos Kevin!!

[@theo_artin]

same, still a great video!

[@jamesbest2221]

This is great! A 5-minute intro/blast is all I need..and with a couple of your curated links below, it is perfect to get me up and running! Note: a "series" of 5 minute videos, each covering a specific topic within the main topic (in a playlist format) would be the best of all worlds! Thanks so much Kevin!

[@KevinPowell]

I have trouble staying under 5 minutes, lol. That was the plan when I created this video, and I do have a coding quickies series, but things tend to drag out most of the time.

[@jensonci11]

I spent a whole Saturday trying to understand media queries. Thank you for this video! I am not feeling overwhelmed anymore! Following!

[@KevinPowell]

I'm so glad the video helped!

[@ashleywinowiecki8513]

that is exactly what i'm going through right now... had a long period of intense frustration today (saturday lol) trying to understand this but now i am starting to grasp it!

[@saurabh75prakash]

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

[@thangjamkishorchand]

It is totally worth it. 5 min videos saves my frustrations and hour of time Thank you

[@mightydawnweb]

Fantastic! I just came over from your tutorial to build a portfolio site. I love the idea for 5-minute tutorial series! Thank you!

[@noelxxiv9382]

Hi Kevin, always the best tutorials. I feel 10-15 mins is the best for someone who wants to learn something new.

[@lukaseierdal2264]

I appriciated it a lot with just 5 mins. As you say if you just need a quick info to move on in the project, it's a hell to watch 25 mins to be sure not to miss anything important :)

[@daletron303030]

love this 5 minute format. as an experienced coder i don't need the long version. ty

[@JaredNichols909]

What I love is how these are great quick reminders for beginners and devs who have been writing/editing code but occasionally forget certain things

[@XYZ48459]

Media queries almost seem "simple' now! After hours in class, I should have known it was so easy! Thank you

[@KevinPowell]

I'm glad the video helped to make it easier to understand!

[@pw4677]

I really appreciate how you cut out the fluff and get to the point! Very helpful video.

[@KevinPowell]

No problem! I tend to add lots of fluff to my videos (I go waaay to indepth sometimes, lol), but am happy with how this one turned out and have plans for more short ones like this going forward!

[@ivyscripting7240]

This was amazingly helpful! It’s always the mark of a good teacher who can break down these subjects quickly and easily, and this was exactly the primer I needed.

[@KevinPowell]

Glad that it helped you out, and thanks for the kind words!

[@RobFos]

Awesome :) thank you. - I was stuck for 4 hours during an online course. and you explained it flawlessly in 5 minutes. - Thank you.

[@KevinPowell]

No problem Robert, I'm happy that I was able to help :)

[@deltavthrust]

Until your consice and logical explanation I struggled with media queries. Good job. Looming forward to more from your channel.

[@RPA99]

I was struggeling with media queries, but this video explains them perfect. Thanks man

[@enverko]

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

[@KevinPowell]

No problem at all, glad you liked it :)

[@kristylee5572]

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

[@ccc0424]

Thank you - right to the point and you focused in on the code so we could actually see what you were doing.

[@Abaramotorai]

That is so what I was looking for. Fast concepts to better grasp CSS. Thank you so much.

[@ruchigoswami9213]

Love this video! I just wanted my media query skills to be refreshed and this video is perfect for that. Thank you 😀

[@afsanazamannipa7711]

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

[@jeltehoekstra2952]

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 :D

[@philmyglass877]

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

[@kidbrave_7673]

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

[@danielquiala1553]

It works really well, your explanation is straight to the point. Many thanks

[@arjunlubana9720]

I liked the video. It's straight to the point. You should do more of these.

[@gratified]

thanks, exactly what was looking for! skipped half of the video, understood in just few words, very nicely done!

[@redwoodJB]

great explanation of why to use max-width over min-width and vice versa. I never understood why to use min-width, but designing mobile first makes sense.

[@reganrayner9884]

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

[@KevinPowell]

Glad you liked it :D - Not all my videos are this to the point, I tend to drag things out at times! Word of warning if you start watching more of my stuff :P

[@MeshTheSnake]

Thank you so this concept was giving me so much trouble but your video explained it so clearly. Excited to build some landing pages using mobile first development after learning this!

[@estengrove3350]

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.

[@KevinPowell]

Glad you liked it Esten, got plans for a lot more short videos like this in the not too distant future :D

[@user-gm1wm2gv6y]

Awesome!! Going through a devslopes class right now, this is extremely helpful.

[@randymurray934]

How did i just find this channel now.. this is what i want in a tutorial channel for sure.

[@alibaba8266]

The only CSS refresher Video Series I watch .

[@sarabojorge5794]

Great video, straight to the point and clear content. Thanks Kevin

[@mrtlheck]

Awesome ... This was the fastest I've ever got a question answered and was able to put it to use right away. Great job.

[@KevinPowell]

Super happy to hear that Terry!

[@mdml9062]

Thanks for the quick rundown, exactly what I needed~

[@KevinPowell]

Glad to hear that! Glad it helped.

[@adriansmythe7420]

Awesome video!!! Exactly what I needed and totally understandable! Thanks Kevin!

[@josephpiouskowura3461]

The best media query tutorial on KZbin 😍

[@user-of1td7uh2h]

Wonderful tutorial short, and to the point, thank you!

[@clifhodges1509]

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 !

[@KevinPowell]

Super happy that you got a few things out of this one :D. Keep up the awesome work, can be hard when we're self-taught at times!

[@travellerOnFeet]

5 mins and you know enough to start getting your hands dirty. Perfect approach. Thanks a lot..

[@Kevin_Zed]

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

[@seanrhone5306]

GREAT 5 min intro that pointed out the basics!

[@liina926]

Thank you so much. It helped alot. very straight forward, clear and short. -IT student

[@hamzazia6763]

Kevin Thank you so very much, so concise and easy !! Love every bit of this video, Keep up the Great Work !!

[@minor12828]

Hey kev keep the others up as well as this format please. Love from DR

[@baguette7869]

Thaaannnk you I was struggling and I did nt know why it was just because i didnt put the media queri below the code thanks so much

[@jwf3148]

This video is Boss - which is not surprising, since, having seen a few of your videos, it is obvious to me that you are Boss !!! Kevin, you are The Man - and you know why? Because your videos are such excellent learning tools !!! Yay !!!

[@KevinPowell]

Really glad you're enjoying my content!

[@dzutest5343]

This is old but trust me, Kevin's advice has always been futuristic. This still works 6 years later

[@GR_BackingTracks]

Liked! Heading to your "5 simple tips to making responsive layouts the easy way" vid... Taking a FEWD Class and my biggest concern is that by the time I finish the course there'll be 800 more hacks I need to know, so I'm fully subscribed to your channel.

[@MxSmack]

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!

[@margodarden2199]

Hi Kevin, I loved your videos a lot especially this one on learning a specific topic in less 5 minutes and I was wondering if you have the same for Flexbox, Grid, other items. Thanks a lot... Please keep your great videos coming. Much Love.....!!!!!!!!!!!

[@msaeedkhan933]

Wow Bro you made it way simpler than i thought it would be, even its my first time to see this. But now I'm sure that i got control over it😍😍😍😘😘

[@pika7037]

I love complete details and maybe also others, so please make big videos and then cover every single detail about that topics. Thank you so much Kevin : )

[@KevinPowell]

For me, it depends on the topic. For something like media queries, I figured I could cover the basic concept really fast, and that through practice people would understand it more. With others, as you've seen, I do go more in depth :).

[@pika7037]

Thanks Kevin

[@divbydiv6426]

For all details about media queries you can checkout developer.mozilla.org they have a very detailed documentation here the link developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries. @kevin good job 👍🏻

[@CAMELTOESURPRIZEE]

if stack overflow is for programming, Keven Powell channel is for front end. always awesome videos. Thanks heaps!

[@Asuuri]

Thank you so much!!! Helped me!!! you really made my day. Keep it up bud and stay safe and healthy!!!

[@Born2DoubleUp]

I'm here! 😎 Great video, just posting a comment to show some support! Keep up the good work. 🤙

[@JoseMendoza-cq5jf]

Short, sweet and to the point. I love it...

[@dominicdomingo9654]

Now I know why there is no changes with my media query it is that because of that thank you for this !

[@pancake7289]

Nice video, new to coding and never used media queries but you gave me all i need to get started. Thank you. :)

[@KevinPowell]

Glad that it helped!

[@a-girl-has-no-name]

Nicely done!! Please make more such videos!

[@Ko0lHaNDLuKex]

This was amazing. It cleared up some silly questions I had about media queries. Thank you!

[@KevinPowell]

Great to hear that it helped!

[@vinay9435]

thanks bro....In just 5 minutes i got media-query.u r cool

[@AzurineHighlander]

bravo! I love this 5 min concept. Well done and right on point!

[@antonionicasio8559]

Hi, @Kevin Powell very helpful quick tutorial

[@jennifershao6953]

Brevity and concise! Clear and awesome thank you!

[@shubhis2466]

It was really helpful. Thanks Kevin!

[@katedowns1919]

This changed everything. Thank you.

[@thechamp2585]

to the point. great! thank you. Ipad Pro 12.9 portrait has been driving me nuts in Webflow

[@keomamallett6536]

Great video; brilliant idea to do informative videos at that length.

[@KevinPowell]

For some topics it can be hard, but I'm happy I pulled it off for this!

[@SecretEyeSpot]

I jump from Kevin on Scrimba.. to Kevin on KZbin.. great Teacher!

[@TCTFounder]

Very nice and concise! Thanks buddy Good Job!! Liked and Subscribed!

[@serpent77]

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!

[@noumanmustafa7435]

Thanks buddy, you saved me a lot of time, such a good explanation in short time.

[@coderlady_]

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

[@sijuv2385]

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

[@arunwithcam5072]

Great job bro you are a great and before this video I watch a so many videos but I don't understand this queries

[@adityatayade6813]

Very helpfull video Kevin & i hope many more to come in less than 5 mins.

[@KevinPowell]

Glad the video helped you Aditya! I plan on making many more for a long time to come 😁

[@doriel494]

Very efficient and helpful ! Thank you

[@user-gk9ut9qc1o]

Concise and clear, thank you!

[@anthoniabalogun]

Simple and straight forward

[@williambiggs2308]

Thank you for the great instruction Kevin.

[@akhonagajula2771]

This has been very helpful... thank you!

[@chadiabifadel7634]

This comment came in late but I just want to tell you that this is a very nice format!

[@yollaifliandry495]

Thank you. I like this video. Very clear explanation. Duration time is good.

[@rahulratwatte107]

Thanks a lot. Very concise yet informative.

[@mrg3921]

Short and useful. Good job, thank you.

[@TheBoBuilder]

Great video. Informative and to the point. Thank you!

[@techbusker455]

Good job Kevin, your channel always amazed me. This kind of video is cool and direct to the point. Man, you should be on lynda or udemy like ultimate web dev course, html from zero to hero, css zero to hero, or anything like that but don't forget us your youtube fans.

[@KevinPowell]

Haha, if ever I make a course I won't forget KZbin, don't worry about that! I'm sort of putting something together for a course, but it's a LONG way off! Too busy with other things.