Container Queries: Once More Unto the Breach - Demos

These demos accompany Container Queries: Once More Unto the Breach. Demo 6 and Demo 7 are using a modified version of element-query.

Demo 1

A single breakpoint where the layout changes from linear to a primary content area and a sidebar.

Demo 2

Module styles, using a single breakpoint not scoped to any specific contexts. The “featured” module is broken at meduium viewport widths.

Demo 3

Modules now have a second breakpoint and set of styles scoped to the “featured” container context.

Demo 4

“Add to cart” button and “Only 3 left” text are aligned right based on modules’ available space, using several media queries and duplicated styles.

Demo 5

Module layouts using a breakpoint based on the element size rather than viewport size.

Demo 6

“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.