These demos accompany Container Queries: Once More Unto the Breach. Demo 6 and Demo 7 are using a modified version of element-query.
A single breakpoint where the layout changes from linear to a primary content area and a sidebar.
Module styles, using a single breakpoint not scoped to any specific contexts. The “featured” module is broken at meduium viewport widths.
Modules now have a second breakpoint and set of styles scoped to the “featured” container context.
“Add to cart” button and “Only 3 left” text are aligned right based on modules’ available space, using several media queries and duplicated styles.
Module layouts using a breakpoint based on the element size rather than viewport size.
“Add to cart” button and “Only 3 left” text are aligned right based on available space using a breakpoint based on the element size rather than viewport size.