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 quote component that adapts from a compact card to a centered, visual style when the container gets wider.
.wrapper {
container: quote / inline-size;
}
@container quote (min-width: 700px) {
.c-quote {
display: flex;
align-items: center;
}
}I enjoy writing and talking about CSS. For today's example, it's a dummy content for a blockquote section that I'm testing with container queries.
Ahmad Shadeed
Web designer
