Master Media Queries And Responsive CSS Web Design Like a Chameleon!

You might be wondering why there’s a Chameleon in the thumbnail of this video.

A Chameleon can change it’s color and pattern - adapting it’s appearance to match it’s environment.

The chameleon's ability to quickly and seamlessly change its appearance is a skill to be admired - and what I’m suggesting is that we ought to be more like the chameleon when creating our responsive layouts.

The mobile-first pre-defined media queries:
/* xs */
/* @media (min-width: 475px) {} */

/* sm */
/* @media (min-width: 640px) {} */

/* md */
/* @media (min-width: 768px) {} */

/* lg */
/* @media (min-width: 1024px) {} */

/* xl */
/* @media (min-width: 1280px) {} */

/* 2xl */
/* @media (min-width: 1536px) {} */

The desktop-first pre-defined media queries:
/* 2xl */
@media (max-width: 1536px) {}

/* xl */
@media (max-width: 1280px) {}

/* lg */
@media (max-width: 1024px) {}

/* md */
@media (max-width: 768px) {}

/* sm */
@media (max-width: 640px) {}

/* xs */
@media (max-width: 475px) {}

Mobile container utility class:
.container {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 0.5rem;
padding-right: 0.5rem;
}

/* xs */
@media (min-width: 475px) {
.container {
max-width: 475px;
}
}

/* sm */
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}

/* md */
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}

/* lg */
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}

/* xl */
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}

/* 2xl */
@media (min-width: 1536px) {
.container {
max-width: 1536px;
}
}

Desktop container utility class:
.container {
max-width: 1536px;
margin-left: auto;
margin-right: auto;
padding-left: 0.5rem;
padding-right: 0.5rem;
}

/* 2xl */
@media (max-width: 1536px) {
.container {
max-width: 1280px;
}
}

/* xl */
@media (max-width: 1280px) {
.container {
max-width: 1024px;
}
}

/* lg */
@media (max-width: 1024px) {
.container {
max-width: 768px;
}
}

/* md */
@media (max-width: 768px) {
.container {
max-width: 640px;
}
}

/* sm */
@media (max-width: 640px) {
.container {
max-width: 475px;
}
}

/* xs */
@media (max-width: 475px) {
.container {
width: 100%;
}
}

[glaze]

Not only your solution is more elegant, but way easier to understand, I did always struggle with this concept, thank you for such an informative video!!!

[andrewpohl]

So for a long time I've avoided learning media queries and someone taught me how easy they were but they were still complicated the way that I was taught. I have a web page and it looks horrible on phone and I just thought it was a lost cause. Before sleeping tn I watched this video and realize I don't got to recode the whole thing I just gotta fix my breaking points tmrw morning it's what I'm gunna do and I'm excited thank you for this video.

[beanguap]

One of the absolute greatest videos I’ve seen in regards to medía queries. One of the best CSS videos I’ve seen in general

[aytuncdemir]

you explain things very understandable. it would be really great to see some bootstrap or tailwind or some js framework videos from you.

[VyrolF]

The way you explain and show things with examples is Congratulations for your hard work on educating us, it’s highly appreciated!

[ufyohwo]

I'm so glad I found your channel! your videos are so engaging and to the point. Thank you so much!

[henrythomas]

Thanks for the new video! I’m looking forward to seeing what other content you post! Always good to learn as much as you can!

[DannyH]

I'm glad i found this channel. keep up the great work!!

[jasonjeong]

just purchased your course as a refresher for CSS. excited!

[eduarddez]

I have looked at many different youtubers in regards to web development and you sir, make the best videos. Explaining the very basic concepts which build up a website in a simple to understand manner!

[Nob]

i love you bro i was searching for a tutorial which is to the point and i struck gold on this one

[bucketassrabbit]

your videos are amazing! thank you for making such high quality content!

[imyou]

man you are awesome please make content often.... we can learn a lot and sure... your going to make it a million subs.

[rhapsodygrab]

You are really always slaying the dragon....keep it up, man

[ankitpoudel]

Damn! Incredible content. Definitely, changing the width of 90% in the project I am currently working on!

[sojimotive]

Fantastic video! could you make a video too how to use using %, px, em, vh and where to use it on perspective div, parent/children?

[moriartythenavigator]

Wow, what a great teacher - I learned what I wanted to know in minutes...I'm going to watch the rest of the tutorial and see what else I can learn. Thanks a lot!

[HenryL]

I just learned how to use media queries thanks to you!!! THANK YOU!😁

[mfkxknl]

Your explanation is great in a very short time. Best on Youtube.

[caioresque]

Oh my god, this video that was i need to see. Thank you from Brazil, bro <3