Category:

Tutorial

Duration: 35:44

2,663 views

119

CSS container queries are a new approach to responsive web design, and they solve some key problems with media queries. Learn how to use container queries in this video. ► Download unlimited creative assets with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus__8VanCOCMc8&utm_medium=referral&utm_source=youtube.com&utm_content=description

To make a website responsive, we traditionally use media queries, a practice that's been around for years but that sometimes has its drawbacks. To fix some of those problems, we can now use “container queries”. Even though they’re not yet supported by all browsers, they have a bright future ahead, and we should learn how to use them today.

In this free course, you’ll learn what container queries are all about and how to use them to create elements that change depending on the size of their parent.

Follow the course and get all the code you need by checking out these CodePen demos: https://codepen.io/collection/LPVvWP

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com/?utm_campaign=yt_tutsplus__8VanCOCMc8&utm_medium=referral&utm_source=youtube.com&utm_content=description

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus__8VanCOCMc8&utm_medium=referral&utm_source=youtube.com&utm_content=description

► Subscribe to Envato Tuts+ on YouTube: https://www.youtube.com/tutsplus
► Follow Envato Tuts+ on Twitter: https://twitter.com/tutsplus
► Follow Envato Tuts+ on Facebook: https://www.facebook.com/tutsplus
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -