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

Nigel 90

@nigel-sys

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


What are more efficient ways of doing it? I feel like my CSS is so messy and barely doing the job. I had a hard time making it responsive.

Community feedback

@rngueco

Posted

Hey Nigel!

To make centering of elements easier, set your container's minimum height to the height of the viewport (i.e. min-height: 100vh) so that you can use Flexbox's easy way of centering:

container {
   min-height: 100vh;
   display: flex;

   /* This will center the children vertically and horizontally */
   justify-content: center;
   align-items: center;
}

It's important to note that this will not work unless your container height is the full height of the viewport.

Aside from that, you could also make your mobile design kick in at an earlier breakpoint (maybe 600px?) so that the content and image won't get squeezed in as the viewport width gets narrower.

Good start nonetheless! Happy coding! 🎉

Marked as helpful

1

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