"Smart" design patterns with container queries
Container queries are more than just a media query that looks at the parent, it also is aware of the font-size of the parent, which opens up some interesting possibilities that media queries simply don’t do.
🔗 Links
✅ I’ve got courses! https://kevinpowell.co/courses?utm_ca...
✅ My video on the basics of container queries: • Learn how to use Media queries & Cont...
✅ CSS Nesting: • Getting started with CSS nesting
✅ The code from this video: https://codepen.io/kevinpowell/pen/MW...
⌚ Timestamps
00:00 - Introduction
00:12 - The classic example of container queries: the card
00:45 - Container queries can do more!
01:33 - The basics of container queries
03:20 - Units matter more with container queries
06:28 - Because units matter, we can make “smart” layouts
14:30 - Little bonus with :has()
#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!
Watch video "Smart" design patterns with container queries online without registration, duration hours minute second in high quality. This video was added by user Kevin Powell 26 June 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 39,126 once and liked it 1.5 thousand people.