Skip to content
Submitted over 3 years ago

Stats preview card component using flex box.

Cyril•110
@cjeanneau
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

Here is my solution. I still have an issue when my screen width goes below 700px then, the container of my image is 5-6 pixels higher than the image and i can't figure out why ! If someone faced and solved the same problem, i will be grateful to have an explanation ? Regards,

Community feedback

  • tediko•6,680
    @tedikoPosted over 3 years ago

    Hello, Cyril! 👋

    Good job on this challenge! About your problem - just add display: block to your .card img 😅

    Good luck with that, have fun coding! 💪

    0
    Cyril•110
    @cjeanneauPosted over 3 years ago

    @tediko Hi Tediko. You're awesome I spent so much time to try to figure out what's going on in my code, breaking it, rewriting it, ... Now i'll try to understand why which should take me another couple of hours ;-) Thanks you and enjoy coding !

    0
    tediko•6,680
    @tedikoPosted over 3 years ago

    @cjeanneau Images has a display value of inline by default and is not take up all space available. The display: block; get all the place what is possible. Hope it helps.

    0
    Cyril•110
    @cjeanneauPosted over 3 years ago

    @tediko Yes it helps. Thanks you for having taken time to answer me. I really appreciate.

    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