![A series of images of an avatar doing a bunch of skateboard tricks.](https://res.cloudinary.com/dnpmdb8r8/video/upload/w_250,f_auto,c_limit,q_auto,w_auto/v1673498930/argyleink/olliolli.gif)
notecss
@Container
pattern
✅ nice inline flex layout when there's room in it's Column
container
if not?
✅ switch to a nice block layout and center the text
I like the ch
unit for this since I'm wanting to switch based on available reading length for the text 🤓
![.Message { display: flex;
@container Column (width < 40ch) { flex-direction: column; text-align: center; } }](https://res.cloudinary.com/dnpmdb8r8/image/upload/f_auto,c_limit,q_auto,w_auto/argyleink/cq-messages-pattern.png)
![2 cards are shown, each with inline layouts](https://res.cloudinary.com/dnpmdb8r8/image/upload/f_auto,c_limit,q_auto,w_auto/argyleink/cq-messages-landscape.png)
![2 cards are shown, each with block layouts and centered text](https://res.cloudinary.com/dnpmdb8r8/image/upload/f_auto,c_limit,q_auto,w_auto/argyleink/cq-messages-portrait.png)