Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Stats Preview Card Component

@abraund

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Overall I think this one was a little displeasing. I note a few accuracy errors on the desktop design but not too fussed on that. It took a while despite requiring no new skills so hm.

I spent an age trying to make it responsively grow in desktop mode, like getting the padding & font to shrink and grow until it snapped on the media. The image on the right has a certain aspect ratio, it needs the left hand to shrink in tandem or it displays badly (with space at the bottom). Played with mins, maxes, clamps, & %s but couldn't quite get it to fit well in the head. I was flailing really. Attempting to add this behaviour as I was all but finished did not really help, I was jutting in new html at the nth hour. I'm sure a similar challenge will present itself, there's another 50 or so free efforts to go. Will research some ideas in the meantime.

Matching a static design, with media elements is becoming do-able enough. A more gradual responsiveness is tricky!

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord