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

🚨🚨🚨 COURSES - slayingthedragon.io 🚨🚨🚨
Join the discord - / discord
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%;
}
}

[@slayingthedragon]

🚨🚨🚨 New CSS Course - slayingthedragon.io 🚨🚨🚨

[@Psyzenn]

:OOOOOOO I really love that idea. Can you tell me if you use both dekstop and mobile containers in one css file or you select based on which design you start first like mobile -> dekstop or dekstop->mobile ? P.S. Nevermind you just mentioned at the end + I remembered you mentioned only 6 media queries and if I used both that would be 12.

[@EtimDavid-rn2o]

Nice job man, thanks a lot, How did your browser show the screen size, please I need to know?

[@slayingthedragon]

@@EtimDavid-rn2o open the chrome dev tools, toggle on the device toolbar, on the top right corners there's 3 dots, click them and select show media queries

[@officialmoai3107]

Thanks. ❤️

[@ThirdEyePsychology]

@@slayingthedragon thank you so much!!

[@glaze4629]

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

[@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

[@aytuncdemir4844]

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 sooooooo goooood! Congratulations for your hard work on educating us, it’s highly appreciated!

[@ufyohwo3613]

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

[@henrythomas7112]

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!

[@jasonjeong3737]

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

[@rhapsodygrab]

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

[@DannyH77]

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

[@boy_deploy]

Pure CSS and HTML. I LOVE THIS!

[@ankitpoudel3255]

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

[@bucketassrabbit1993]

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

[@imyou3627]

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

[@astralunification1681]

The best on CSS I have seen so far, I also bought the course 3 months ago, help me a lot with my websites, waiting to purchase the other courses when released, thanks bro

[@JasonColdham]

Those break points have helped me so much! Thank you for another great video!

[@Darius-Paul]

finally someone who knows how to explain , without using fancy language. - all others "beginner" tutorials just gave me a headache. Hats down to you.

[@Nob47]

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

[@HenryL1606]

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

[@user-mf5kx4kn8l]

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

[@mackenmd]

Your presentation skills are second to none! Thank you very much for your very professional work.

[@matthewnjoroge4759]

How do i get my browser to show me pixel dimensions?

[@casperdrums]

@@matthewnjoroge4759 see my comment

[@thebestof_angel8010]

This is exactly what I was looking for, life saver thanks man

[@moriartythenavigator1945]

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!

[@caioresque]

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

[@itsnariah]

Found you!!! I've been looking everywhere on how to arrange the elements if I have to view them in mobile and this video helps me so much! Thanks!

[@charlesngerem3198]

Keep pushing out these contents and you're heading for 1M subs

[@sayanghosh6996]

Love your videos! keep them coming.

[@user-by6bi8wj3h]

Informative, helpful and aesthetic 5/5 tutorial. Earned me as a subscriber.

[@sojimotive7166]

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?

[@relja_]

this is also confusing to me, i cant find a video that explains it well, all they do is explain what are these units and categories them but not when to use which one.

[@withacc]

He talked a little about these measurement units in another video titled 'CSS Units: A Deep Dive'

[@relja_]

@@withacc yea i watched that video its good but if i remember correctly he only covered the theory part of units but not how there are used in a real project. Not only him i never found any video that covers that part.

[@ShaDoW_T0.]

i loved your videos bro it was short and simple and most of all it was really helpful

[@zafit02]

You are the best keep this way you will have millions of views so easy to learn with you

[@UwaisLatona]

oh my god thank you so much for this, other videos were just complicating things so much

[@ragenk1062]

Thanks for sharing your knowledge! Looking forward to your next video :P

[@AbhinandanMishra1]

You're awesome 🎉 Please make more videos and teach the hard parts of CSS.

[@Sami_K99]

Welcome back 🎉 great video

[@ijadjukaj7539]

Very nice video as usually, explaining with practical work is very effective... your videos are the most understandable front-end tutorials on youtube in my opinion... I wonder if you do some videos about javascript concepts you would help us because are a little confusing.

[@theMadZakuPilot]

this is perfection.

[@TerryLoughran]

Very cool and so adaptable for all builds. Mobile first all the way 😊 Thanks 👍

[@Kronical_Lpd]

I've never seen this many chameleons within the first 20 seconds of a video All jokes aside tho, amazing video like always.

[@MONGMONG-ep3eb]

thank youuuuuuu I've been struggling with my lesson lately and now i understand it

[@iamsunil21]

your voice is like daily dose of internet.

[@deepjoshi356]

There are many solution to a single problem. You have the clarity to choose the best fit. What are the problems are you facing?

[@shiba_baig1631]

impressed by your videos extremely smooth and deep explanation...... keep it up!

[@OmniOmnium]

Great video as usual! :) I was wondering if you would be interested in creating a video about those "pop in" animations when scrolling down while the elements get visible. That'd be dope, feels like every portfolio piece has them.

[@slayingthedragon]

Sure great suggestion thanks ☺️❤️

[@roronoazoro3163]

​@@slayingthedragoncan you please tell me which website are you using to shrink those size of websites without shrinking the actual chrome page

[@tuffilaro1565]

@@roronoazoro3163 it's a feature of the chrome dev tools. Google: "chrome devtools device mode" to find how to do it. Fyi Firefox also has that feature and it works better there in my opinion because you can also zoom in and out in it by just using ctrl + mouse wheel.

[@simba---]

@@roronoazoro3163 Its not a website but dev tools in your browser. Right click, inspect and click on mobile icon on the top. I assume you already found an answer but in case you did not I hope this will help.

[@Xooou_]

Waiting for this!❤❤

[@Bol_imla]

great illustration.Keep it up for the wonderful tutorial

[@SUPA93200]

Wow, excellent, thanks again for sharing your knowledge.

[@brianm3160]

You're back!

[@yosefff19]

You really make coding looks so easy and fun! definitely worth watching every videos of yours! so educational and good for beginners :)) I hope you upload more content

[@leomacdon7858]

Thank you. Your contents are really helpful.

[@FajarFadhillah-vt4dh]

This is good and effective, explain something with good visual, i like it

[@KelvinEreremena]

I love this man. Thank you!!!!

[@brandophiri3618]

This guy is actually good

[@michaelchukwu7480]

God! The Way you explain things....... It just so mind blowing. You have a gift bro, I would seriouly want to learn or have a teacher with even half of your teaching skills. You just got yourself a faithful Subscriber. Keep it up bro!!!1

[@slayingthedragon]

Thank you much love ❤️

[@chrismachabee3128]

I have been trying to understand the mobile design first concept for a while. How the heck do you do that? Yu have just shown me the way. Total brilliant. I go to a lot of instructors to get sorted, without success on this problem, but you were the best teaching the method. The only that took time to explain the difference between Max and MIn and how it relates t mobile first responsive desive. Well done. Now. if you just get the Javascript course done.

[@khumanshusingh]

amazing work bro really learned everything clearly💯💯

[@mohammadabbas1623]

you are doing great bro keep going

[@j.caceres8069]

Que buen video amigo!!! M gustan tus videos y como los explicas.

[@DojoDyo]

another awesome guide STD!! please make more !! HTML and CSS!!

[@charlesbrill1531]

thank you deeply from my soul for this video

[@lastspoil5547]

Best video on media query

[@soum-ik]

Your video concept is awesome. It very helps full for m. Take love from Bangladesh💖💖, Love you brother. Create this type of video regularly

[@rSethu98]

Very nice approach

[@tusharyadav5874]

Thanks for the video ❤

[@sanselm529]

thank you. very good explained

[@fernandosiahaan906]

You are a CSS magician

[@Zubair73735]

thanks a lot! It helps me a lot

[@andrewii23]

I love the intro 😂

[@bobevskiboban]

Salute to you sir, helped a ton

[@benjicanones1454]

Superv explanation!

[@Evolveado]

just AMAZING.

[@UndeadSasuke34]

Exceptional video! Could you please make an in depth video about margins, paddings and borders, and in that video also go in depth about nitty gritty stuff like the consequence you've talked about at 8:10? There are many videos about this out there, but none go in depth about the relations and consequences of these properties.

[@slayingthedragon]

Good suggestion ❤️

[@nitkarshchourasia2406]

🎯 Key Takeaways for quick navigation: 00:00 🦎 *Understanding the Concept of Media Queries* - Media queries allow targeting specific viewport sizes for applying styles. - Syntax involves specifying media type and conditions within parentheses. - Differentiating between `max-width` and `min-width` is crucial for effective usage. 02:58 🖥️ *Implementing Responsive Design Strategies* - Choose between `max-width` for desktop-first design and `min-width` for mobile-first design. - Apply media queries to adjust styles for various breakpoints to maintain responsiveness. - Select elements within media queries and modify their styles accordingly. 04:53 📱 *Pitfalls of Reactive Media Query Application* - Reactive application of media queries leads to a proliferation of breakpoints. - A large number of breakpoints can complicate maintenance and scalability. - Implementing predefined media queries for components enhances efficiency and reduces complexity. 06:01 🌐 *Leveraging Predefined Media Queries for Efficiency* - Utilize predefined media queries for specific viewport sizes to streamline responsive design. - Define media queries for various screen sizes: extra small, small, medium, large, extra-large, and extra-extra-large. - Employing predefined media queries reduces the need for reactive breakpoint additions and simplifies layout maintenance. 07:25 📐 *Optimizing Container Responsiveness* - Introduce container utility classes to ensure consistent alignment and responsiveness across sections. - Set up containers to shrink responsively only when the viewport touches, enhancing visual coherence. - Compare and contrast different container implementation methods for mobile-first and desktop-first design approaches. Made with HARPA AI

[@fragmiddlet]

Thanks !! :) amazing video :)

[@DJReeRee]

Love this❤

[@thelegaldrive]

very useful video, thank you.

[@user-xj6fp8mc1o]

A Damn good video... this is a damn good video

[@samueldayo9261]

I love your teaching your good. Other mentors just type the code you can't even know how. It functions

[@M7D_aska]

Could you make a video talking about the differences between normal CSS and tailwind , as well as how much of a difference using JavaScript can make

[@NewbieDev42-it8tg]

Great video

[@japoetrycollection5201]

I subscribe your channel right now I love the way that's you teaching Please make separate playlists of all HTML5 CSS3 and JAVASCRIPT and it's frame works and it's different small projects

[@shaunm9025]

you make great videos bro

[@snakeeyesOFFICIAL76]

Best video about media queries my friend ...you should upload more content

[@slayingthedragon]

Thank you !!

[@shauryasoni748]

Bro please make a full css course with all animations and all please

[@maxxphire.]

This guy is good explaining css properties. Now my prob' is how i am going to use it properly. I have to understand how css relative measurements works. Specially the pixels and viewports. They're quite confusing.

[@kenxinhxc1635]

Thanks for this

[@rupiik]

Wow!!!

[@728sahilpanchbhaiya5]

Earned a subscriber today...❤❤❤

[@Shivam-sl4sp]

Great explanation as always! btw do you use any extension when you apply media query your dev tools use colors to specify it?

[@slayingthedragon]

Thanks! No I'm not using any extensions, it's all features you can activate on Chrome's dev tools

[@ogawde7]

blessing thats all i can say

[@justinmathew8929]

Waiting for more videos ☺️☺️

[@zexinzhao5423]

nice video, thks for sharing ! 😘

[@rohitkumar-eu1hs]

Easy to understand

[@ThiagoSilva-jn6ov]

good thing my g

[@brandonlizardo7662]

thank you so much

[@mdtausifahmed6205]

coool man

[@aurorapaisley7453]

YOU'RE SO BASED

[@JosephCodette]

You could use clamp for responsive sizing .. saves a lot of lines of code

[@izuchukwupromise4071]

How does clamp work?

[@deatho0ne587]

Display grid or flex with a bit of clamp() will cover most things you are talked about. I am not saying the media query is completely out of the picture though. You then have @container queries which are way better than @media, but not 100% supported till about September of this year. Yes, stuff like bootstrap and tailwind have to go with @media since they have to be for almost any site out there. They generally are not custom sites though.

[@marselse]

you are him.. ty for this