Skip to content
Submitted over 2 years ago

Responsive stats preview card using flexbox and media queries

Nader•300
@youtubbeh
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

I'm having trouble getting rid of the purple line between the image and the rest of the content on mobile view (width 375px or less). Feedback is greatly appreciated!

Community feedback

  • Alan Ibarra•440
    @Ibarra11Posted over 2 years ago

    The issue with the image is that the <img /> is an inline element and adds whitespace to the bottom of the image. You can address by either making the img a block element or make it a flex item by setting the parent to a flex container. Here is an article for reference: https://stackhowto.com/how-to-remove-white-space-under-an-image-using-css/

    Marked as helpful
    1
  • Nader•300
    @youtubbehPosted over 2 years ago

    Thanks a lot Alan!

    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