Submitted over 3 years ago

Stats Preview Card Component - Mobile First, Flexbox and SASS

Claire Calder• 310

@claire-ca

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Stats preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

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!

Community feedback

Amber Harmon• 95

@aharmon413

Posted over 3 years ago

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

Claire Calder• 310

@claire-ca

Posted over 3 years ago

@aharmon413 Thanks Amber! That solved it for me. Sometimes it's the simple things that trip me up.

Amber Harmon• 95

@aharmon413

Posted over 3 years ago

@claire-ca You're welcome, and same! I spent way too long tinkering with that issue, haha.

Claire Calder• 310

@claire-ca

Posted over 3 years ago

@aharmon413 Haha, it's good to know I'm not alone!

Sergio Reynoso• 320

@sergioreynoso

Posted over 3 years ago

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.

Claire Calder• 310

@claire-ca

Posted over 3 years ago

@sergioreynoso Thanks for the advice Sergio! I've updated my solution now to use a pseudo element instead.

Please log in to post a comment

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