CSS · Exercise 6 of 6 Previous
Intermediate
Build a container-aware product card
Build a product card that adapts to the space it's given, not the window:
- make .slot a size container for its width;
- when the slot is narrower than 400px, the image sits above the text;
- when the slot is 400px or wider, the image sits beside the text (to its left);
- the image is always a square, filled without squashing (object-fit), and never wider than the slot.
Use a container query, not a media query. The checks resize .slot to test both layouts.
What Check tests
- .slot is a container for its width
- The layout uses @container, not @media
- In a 300px slot the image is above the text
- In a 600px slot the image is beside the text, on the left
- The image is square and not squashed
- The image never overflows the slot
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.