Submitted over 2 years ago

Stats Preview Card Component | CSS Grid and Flexbox

Justin Vera•270

@justinnvera

Preview site View code

This is a solution for...Stats preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

I had a really hard time with the mobile responsiveness for this project. I couldn't get the .container to adjust to the overflowing vertical size of .stats. I decided against using fixed a height at first but since I couldn't find any solutions, I was left with no choice. If you have any suggestions or feedback that might fix this, feel free to shoot me a message.

Community feedback

romila•3,570
@romila2003Posted over 2 years ago
Hi Justin,

Congratulations 🎉 on completing this challenge, it was a great attempt.

Regarding the responsiveness of your card, it is okay however there are improvements that can be made. Currently, the desktop and mobile version looks good however the image for the mobile version is not shown 100%. When looking at your code, I noticed that you took the desktop-first approach. Instead, I would advise you to use the mobile-first approach as it would be easier to adjust the elements as you increase the screen size. With your card, the height is not the main issue, it would be the width property instead as there is no specified width. Instead, the card just increases until it reaches the specified width property which would first be 730px, then 750px and then 950px.

Overall, great attempt and wish you the best for your future projects 👍.
Marked as helpful
1
Justin Vera•270
@justinnveraPosted over 2 years ago
@romila2003 I will research and watch videos on Mobile-first approaches to projects. Thanks for letting me know
1

Please log in to post a comment

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