Learn how to use Media queries & Container queries

A dive into the world of media queries and container queries, covering the basics of how each works, the differences between them, when you might want to use one over the other, and more.

A big thanks to Geoff Graham for his help in making this video. https://geoffgraham.me/

🔗 Links
✅ Practical guide to responsive web design:    • A practical guide to responsive web d...  
✅ MDN on the other media query features: https://developer.mozilla.org/en-US/d...
✅ Range syntax browser support table: https://caniuse.com/css-media-range-s...
✅ Container query browser support table: https://caniuse.com/css-container-que...
Container query units browser support tables: https://caniuse.com/css-container-que...
✅ Style query browser support table: https://caniuse.com/css-container-que...

⌚ Timestamps
00:00 - Introduction
00:55 - New merch!
01:27 - Media query basics
03:20 - Updating custom properties with media queries
05:00 - Creating ranges
07:35 - The new syntax
10:25 - Media queries are for more than only the size of the viewport
12:07 - Container query basics
15:23 - The difference between media and container queries
19:53 - Naming our containers
22:00 - container shorthand
22:30 - Quick recap
23:05 - Container Query Units
27:00 - Might be worth defining the html element as a container… maybe
28:58 - Style queries
32:50 - Which one should you be using?

#css

--

Come hang out with other dev's in my Discord Community
💬   / discord  

Keep up to date with everything I'm up to
✉ https://www.kevinpowell.co/newsletter

Come hang out with me live every Monday on Twitch!
📺   / kevinpowellcss  

---

Help support my channel
👨‍🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-t...
💖 Support me on Patreon:   / kevinpowell  

---

My editor: VS Code - https://code.visualstudio.com/

---

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 YouTube channel, make sure to follow me on Instagram and Twitter.

Twitter:   / kevinjpowell  
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!