Skip to content
Submitted about 3 years ago

Stats Card - Solution!!!

Daniel Ayala•290
@dan-ayalahdez
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I struggled to make both flex elements (The image and the stat info div) in the main div to be exactly the same size, is there an easier way to accomplish this?

Also, in this project i used em and rem instead of pixels as recommended by some of you, any tips regarding these units are highly welcome!

Thank you! :)

Code

Please log in to post a comment

Log in

Community feedback

  • romila•3,550
    @romila2003

    Hi Daniel,

    Congratulation 🎉 on completing this challenge, it was a good attempt but there are some problems that I want to address:

    1. Regarding the responsiveness of the card, it is not very responsive when adjusting the screen sizes. The card looks fine in the desktop version however the mobile and tablet version does not look fit within the screen and display well. Thus, it is best to take a mobile-first approach so that it would be easier to adjust the elements as the screen increases. Also, it would be better to use the min-width instead of max-width.
    2. In the mobile screen size, I noticed some of your codes were quite long in css. Sometimes, it is easier to use the broader terms and type the elements there e.g. border-radius: 0.5em 0 0 0.5em; and padding: 1rem 4rem 2rem 4rem;. This makes it easier to shorten your codes. If you do not understand, the values follow as below:
    • top-left
    • top-right
    • bottom-right
    • bottom-left

    The design overall looks great and pretty accurate to the design provided.

    I wish you success with your future projects and keep coding 👍.

    Marked as helpful

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