my card looks fine on the page but gets squished in the sidebar?? do i need container queries
Jen Hayes@night_owl_jen
hi all 🦉 1am here, kids are asleep, coffee #3. building a recipe site for practice and i have a recipe card, image on the left and text on the right. on small screens it stacks. i did it with a media query like teh tutorial said:
.card {
display: flex;
flex-direction: column;
gap: 1rem;
}
@media (min-width: 600px) {
.card {
flex-direction: row;
}
}on the main page it looks great. but i also show the same card in the sidebar ("you might also like") and there it is squished horrible, the image is like 40px wide and the title wraps every word. becuase the screen is wide, the media query says "row" even though the sidebar is tiny.
is this what container queries are for? i read the MDN page but the syntax confused me, where does the container thing go, on the card?? also is :has() a real thing or did i dream it at 2am last week lol
Accepted answer
Yes, this is exactly what container queries are for. The card cannot query its own size, so you make the parent a container and the card asks the parent:
.card-wrap { container-type: inline-size; }
.card { display: flex; flex-direction: column; gap: 1rem; }
@ container (min-width: 450px) {
.card { flex-direction: row; }
}
(no space after the @ in real CSS, this site turns it into a mention otherwise)
Wrap each card in a .card-wrap, or put container-type directly on the sidebar and on the main column. Now the card switches to a row only when its own box is at least 450px wide, wherever it is. With nested containers you can name them: container: card / inline-size; and then query that name.
And :has() is real, you did not dream it. .card:has(img) { ... } styles only the cards that contain an image. Works in all current browsers since the end of 2023.
One accessibility note: flex-direction changes only the visual order, not the DOM order, so screen readers still read image, title, text. Good habit to check that whenever you rearrange things with CSS.
Get the best of #css-is-my-passion weekly
One email each Monday with the most useful posts. No spam; unsubscribe in one click.
Comments
Sign in to join the conversation.
Sign in to commentMariana Costa@mari_costa
Not the full answer but yes, this is exactly the case for container queries! The media query look at the screen, the container query look at the box where the card is living. I have a doubt: is the sidebar always the same width or it change?
Jen Hayes@night_owl_jen
it changes!! its 25% wide on desktop and disappears under 900px lol. thats why i got so confused
Accepted answer
Frieda Sommer@frieda_s
Yes, this is exactly what container queries are for. The card cannot query its own size, so you make the parent a container and the card asks the parent:
.card-wrap { container-type: inline-size; }
.card { display: flex; flex-direction: column; gap: 1rem; }
@ container (min-width: 450px) {
.card { flex-direction: row; }
}
(no space after the @ in real CSS, this site turns it into a mention otherwise)
Wrap each card in a .card-wrap, or put container-type directly on the sidebar and on the main column. Now the card switches to a row only when its own box is at least 450px wide, wherever it is. With nested containers you can name them: container: card / inline-size; and then query that name.
And :has() is real, you did not dream it. .card:has(img) { ... } styles only the cards that contain an image. Works in all current browsers since the end of 2023.
One accessibility note: flex-direction changes only the visual order, not the DOM order, so screen readers still read image, title, text. Good habit to check that whenever you rearrange things with CSS.
Jen Hayes@night_owl_jen
IT WORKS. frieda youre amazing, i literally said 'oh my gosh' out loud and woke the dog. 'the card cant query its own size' is what i was missing, i kept putting container-type on .card itself lol. thank you thank you 🦉☕
Giulia Bellandi@giulia_designs
The 450px is a good start but test with real recipe titles! Long italian dish names break everything ahah ✨
Ray Alvarez@ruck_n_code
Copy that. Bookmarking for when I get to CSS in the course. Jen you are two modules ahead of me again
Jen Hayes@night_owl_jen
ray youre doing python AND linux, you get a pass lol. study session thursday?
Ben Carter@bencarter_web
late but container queries are the best thing to happen to CSS since flexbox. rebuilt a taco truck menu with them and the owner thinks i'm a wizard. dont tell him its 3 lines