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

responsive stats card built with media queries

snuwpl 40

@snuwpl

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


I feel like much of CSS code is redundant, I had to do lots of fine-tuning to get results I wanted. Mostly issues with resizing images in response to viewport - but I've fixed it by setting max-width or max-height for container (max-height for widescreen, max-width for mobile).

Only thing I had lots of problems with, is text placement in text container, while in widescreen mode. I had to min-max margins etc. to get results I wanted. Is there any way to avoid it, or is it a common practice?

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