Learn Backend Development Part-Time, Online
Learn AI, Data Science & Business — Earn Certificates That Get You Hired
Overview
AI, Data Science & Cloud Certificates from Google, IBM & Meta — 40% Off
One plan covers every Professional Certificate on Coursera. 40% off Coursera Plus Annual.
Unlock All Certificates
Learn a content-first approach to selecting breakpoints for media queries in this 26-minute tutorial by Kevin Powell. Discover why generic breakpoints and device-specific sizes are problematic, and how to create more effective responsive designs by letting your content guide breakpoint decisions. Explore how container queries change the responsive design landscape by opening new possibilities. The tutorial covers working with ranges, avoiding excessive breakpoints, implementing a content-first approach in real layouts, and strategic uses of container queries based on column sizes. Includes practical code examples and demonstrations to help you write more efficient and maintainable responsive CSS.
Syllabus
00:00 - Introduction
00:50 - Working with ranges
05:00 - You don’t need all those breakpoints
05:50 - Content-first breakpoint approach
07:00 - Don’t micromanage your breakpoints
07:50 - Approaching this with a real layout
13:50 - When container queries make more sense
19:45 - Container queries based on the size of the columns you want
22:12 - Another example of container queries being useful
Taught by
Kevin Powell