Skip to content
Submitted about 3 years ago

Responsive preview stat card component

Veronica Orozco•260
@VLOrozco
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Any support in making cleaner code or enhancing my project is appreciated. Happy coding everyone!

Code

Please log in to post a comment

Log in

Community feedback

  • J.D. Browne•890
    @PeshwariNaan

    Hello Veronica. Nice work on the card. One thing that I think will help you is how to make the image responsive. Create a <div> container that will hold your image -

    <div class="image-container"> <img class="image" src="./whatever"> </div> -

    Once you have this add this code to your .image css code: .image { max-width: 100%; max-height: 100%; object-fit: contain; overflow: hidden; } This will force the image fill the container and change responsively and keep its aspect ratio.

    Marked as helpful
  • Yewande Adeyemi•110
    @Wandesanguine

    You’re really good. I learnt a lot from your code. I have to apply them in my own code

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