Skip to content
Submitted over 3 years ago

Stats Preview Card Components

Victor Eke•250
@Evavic44
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

This card was aligned using CSS flexbox which required a large chunk of CSS code to work, would prefer to have a simple solution to design this. If you have any recommendations, do well to let me know. Thanks

Community feedback

  • Tarek Mo•365
    @tarek-moPosted over 3 years ago

    Hey Victor, I've read your code and this is what i think could be improved: the section with the class 'container' isn't perfectly centered vertically, and that's because you added a margin top of 10.5rem. Instead what you can do is set this section to position absolute and type top: 50%; left: 0; transform: translateY(-50%) which will center it vertically in all devices

    Marked as helpful
    0
    Victor Eke•250
    @Evavic44Posted over 3 years ago

    @tarekotp02

    Yeah. I've been struggling with aligning this to the center. Would definitely try this out. Thanks for the feedback.

    0

Please log in to post a comment

Log in with GitHub

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