Container Queries Demo

Simple Box Element

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt quam labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

$199.99 per Month

Buy it now!

Simple Box Element

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt quam labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

$199.99 per Month

Buy it now!

Simple Box Element

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt quam labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

$199.99 per Month

Buy it now!

Width queries

.box:container(min-width: 40em) { ... }
.box:container(40em < width <= 70em)

Background color queries

.box:container(background-color-lightness < 20%) { ... }
.box:container(min-background-color-saturation: 50%) { ... }
.box:container(60deg < background-color-hue < 180deg) { ... }

Text align queries

.box:container(text-align = right) { ... }

Font size queries

.box:container(font-size < 10px) { ... }

Any CSS property you want!

.box:container(any-css-property = any-value) { ... }