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

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

"Cum sociis"

cool except for the fact that nun of this works i do the same thing you do and it doesnt work, on to the next vid

this great

i really like your idea of short time videos

how can stay longer than 30min when coding

Is it best practice to design for Mobile First then work up to desktop?
Cheers!

udar

Can you explain this for images actually i have make a portfolio.
Now its completed but i don't know how to make image and all stuf responsive 😅

the part about how to make css for print porpoises intrigme. could you expand on that?

Kevin, I love all your content. I learn better by following along and replicating. Please make sure we can see all html and css (I can here) and images if you use them. Thank you :)

Thank you!

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

Hello, good morning, your tutorials are very good, but I have a problem with the media query to go from web size to convert it to mobile. The problem is that it doesn't take the value of each measure of the width of the page for the mobile size. I can send you the project so you can tell me what could be the problem. I can send you the project I have it on Github

This is wonderful

How do I replicate your way of enlarging and shortening the screen?

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

Thankies :)

Simple and straight forward

You made me hit the like button

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

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.

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.

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

Hello, how was the responsive frame made ? Is it coded through css or is it part of the web dev tools in the browser?
Thank you for your help

Tu expliques un peu trop rapide

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

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

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

Everthing was wonderfull and full informative.

Thank you!

This is awesome, but how do you use it in projects, for example do you create a single file with all the media queries required, or is it better to add them for each component?

wow!! thank you sooo much teacher!!

Kevin... This seems to only work in firefox (not Chrome). I define all of my media queries so that they only have the "max-with" value and the presumption is that all of the queries together function as a "range" limit.

@media (min-width: 80rem) {
header::before {
content: "min-width: 80rem";
}
}


@media (max-width: 80rem) {
header::before {
content: "max-width: 80rem";
}
}

@media (max-width: 60rem) {
header::before {
content: "max-width: 60rem";
}
}

@media (max-width: 40rem) {
header::before {
content: "max-width: 40rem";
}
}

@media (max-width: 20rem) {
header::before {
content: "max-width: 20rem";
}
}

This simplifies the query and if I place them in this order it seems to work fine in Firefox but something breaks in Chrome.

I guess the feedback I want to get from you is whether this approach is common or is known to not work or...

I hate the idea of having to define the ranges including the minimum as well.

This changed everything. Thank you.

Is this video relevant in 2022?

hi Kevin, i am new at this stuff, how do you know which media query to use/choose. i was doing a challenge for a portfolio but got stuck by the media query--the code was
@media (width:200) {
body{
font-size: 10px;
}---------------------------------thanks for any feedback

The video is super helpful,,, thanks bro

Awesome video

This helped heaps, thanks!

It was good. I liked it.

Great video as always.

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

Kevin Powell is the CSS Hyper-Loop

Could you please explain how to properly use the DIV tag in less than 5 mins? I am having trouble learning this, thank you.

Always remember we must repent of our sins (sin is transgression The Law Of Yahuah The Father in Heaven. The Law are The Books: Genesis, Exodus, Leviticus, Numbers, & Deuteronomy). We must repent of our sins and Have Belief On Yahusha The Messiah. HE Died and Rose three days later so that we can be forgiven of our sins!

Come to HIM🙂🙂🙂🙂🙂🙂🙂🙂

wow, this is fast and easy to understand!

I wanna be like Kevin when I grow up!!! A css ninja

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

the dislike ratio is astounding