Skip to content
Submitted about 4 years ago

Stats Preview Card Component - Mobile First, Flexbox and SASS

P
Claire Calder•310
@claire-ca
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I'm fairly pleased with the end result, but I have to admit I did find this challenge harder than I thought I would. I'm not good with images and making them responsive - it's something I need more practice at.

On my mobile site I notice there is a small purple bar just under my image and I'm not sure where that is coming from and how to get rid of it? If anyone could shed some light on that I would be very grateful.

Thanks!

Code

Please log in to post a comment

Log in

Community feedback

  • Amber Harmon•95
    @aharmon413

    Regarding the small purple bar -- I had a similar issue when I was doing this challenge. Setting the display of the image to block (instead of the default inline) solved it for me so it's worth a shot. This was the Stack Overflow post that helped me out: https://stackoverflow.com/questions/31444891/mystery-white-space-underneath-image-tag

  • Sergio Reynoso•320
    @sergioreynoso

    Good job! As an extra challenge, try adding the overlay as a pseudo element in css instead of using a div. This would make your image components more modular.

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