Cinnamon rolls
A bit of desc text in here
You clicked 0 times. The light is broken!
You clicked 0 times. The light is broken!
You clicked 0 times. The light is broken!
Container queries
Supported in Edge: yes.
Supported in Firefox: yes.
Supported in Safari: yes.
This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2023
A typical news card that switch from a stacked to a horizontal design based on the available space in its container.
.card-wrapper {
container: card / inline-size;
}
.card {
display: flex;
flex-direction: column;
}
@container card (min-width: 350px) {
.card {
flex-direction: row;
}
.card__thumb img {
width: 200px;
}
}Take a look at the demo below and resize the wrapper.
A bit of desc text in here