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

Francescoβ€’ 270

@FraCav99

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


Hello world!

What I've found a little bit complicated was making image adapt to the container. Looking at some solution, I've adapted them to my case, thanks to the great community here on Frontend Mentor!

Any suggestion will be highly appreciated! Have a nice day! :D

Community feedback

Lucas πŸ‘Ύβ€’ 104,420

@correlucas

Posted

πŸ‘ΎHello Francesco, congratulations for your new solution!

Here's my tips to improve your component and image responsiveness:

Add display: block and max-width: 100% to make the image responsive and object-fit: cover to have the effect cropping the image inside the container while the container resize:

.img-container img {
display: block;
    max-width: 100%;
    object-fit: cover;
}

πŸ‘‹ I hope this helps you and 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