How can I make the Stat to be responsive / vertical for small devices?

[Mashiane]

Hi there

I cant seem to make the Stat reponsive. Here is the tailwind play... Im trying to make it vertical for small devices

https://play.tailwindcss.com/0QWV1BN9Gb?size=470x720

Thanks in advance

[daveteu]

<div class="stats stats-vertical sm:stats-horizontal shadow">
https://play.tailwindcss.com/GCrd1SzxXc?size=540x720

[Mashiane]

Thank you so much, me was thinking the classes and their responsive counterparts are mutually exclusive.

[Mashiane]

Sorry, please bear with me, just to confirm, your solution works, but shouldnt this be the other way round? Can you please clarify?
Horizontal is from left to right whilst vertical is top to bottom or vice versa.

So stats-vertical means top to bottom (my request) whilst sm:stats-horizontal means left to right (the opposite)

Shouldnt the classes be stats-horizontal (left to right for anything else) and then sm:stats-vertical (top to bottom) for small devices)? Confusing...

[Mashiane]

Anyway I just noted this, #807 and am realizing what my problem is, I guess I have to wait for the next update. Thanks you.

[saadeghi]

Shouldnt the classes be stats-horizontal (left to right for anything else) and then sm:stats-vertical (top to bottom) for small devices)? Confusing...

sm: prefix on Tailwind CSS means "screens larger than sm (640px)"
So, in <div class="stats stats-vertical sm:stats-horizontal"> it means:

• it's vertical by default
• it will be horizontal on screens larger than 640px