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

Responsive stats preview card using flexbox and media queries

Nader 300

@youtubbeh

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


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

P

@Ibarra11

Posted

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

@youtubbeh

Posted

Thanks a lot Alan!

0

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