RSS FeedTwitterMastodonShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconMedia IconGit IconSpeaking IconTools Icon
A series of images of an avatar doing a bunch of skateboard tricks.

@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; } }2 cards are shown, each with inline layouts2 cards are shown, each with block layouts and centered text

Member of a CSS Webring

Try a site in the ring!