I pushed an update to my review site today that improves the review card layout on mobile! Those cards were the very first things I designed for the site. I wanted them to have a nice, clean layout. For code simplicity, I went with a single layout that shrunk gracefully, but suboptimally. 1/5 - ThreadSky

About ThreadSky

xavd.id • 61 days ago

I pushed an update to my review site today that improves the review card layout on mobile! Those cards were the very first things I designed for the site. I wanted them to have a nice, clean layout.

For code simplicity, I went with a single layout that shrunk gracefully, but suboptimally. 1/5

Comments

xavd.id•61 days ago

It was especially noticeable on reviews whose body text was taller than the poster image. All the text was shoved into a single column (which got really narrow on mobile layouts).

In the new layout, the review text gets the full width and extra info is moved to the top area. 2/5

xavd.id•61 days ago

This improvement was _extra_ noticeable on my simpler review boxes, like those seen on genre-specific pages and review system explanations.

There's now some new empty space above the review text, but something always has to give. 3/5

xavd.id•61 days ago

In each case, I ended up making two separate versions of the Review component. They're both in the HTML, but one is hidden with CSS bases on your viewport with.

Doing everything twice isn't awesome, but it's simpler than trying to make a single component that can really restructure itself. 4/5

xavd.id•61 days ago

And lastly, I made a change to desktop to use space a little better there as well. If there's a subtitle (as there is for all games and books in series), the text will now wrap around that side box instead of starting below it.

These are all small changes, but I think they're worthwhile. Enjoy! 5/5

Posting Rules

Be respectful to others
No spam or self-promotion
Stay on topic
Follow Bluesky's terms of service

Comments

Posting Rules

Reply