Duration: 0:00

5,457 views

130

Love responsive web design? Container query units sound interesting? In this video, you’ll learn how to size elements in CSS based on the dimensions of the parent element. ► Download unlimited web templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_j9CxKmX7iZE

Resources:

• CSS Container Query Units - Initial Example: https://codepen.io/adipurdila/pen/eYEoQgr
• CSS Container Query Units - Example with Query Units: https://codepen.io/adipurdila/pen/LYjoJdN
• clamp() - CSS: Cascading Style Sheets | MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()
• CSS Containment Module Level 3: https://drafts.csswg.org/css-contain-3/#container-lengths
• Container Units: https://codepen.io/scottkellum/pen/jOwmOZE?editors=0100

Read more on Smart Sizing in CSS With Container Query Units on Envato Tuts+: https://webdesign.tutsplus.com/tutorials/smart-sizing-in-css-with-container-query-units--cms-39738?utm_campaign=yt_tutsplus_j9CxKmX7iZE

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

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_j9CxKmX7iZE

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