Submitted about 2 years ago

Responsive Stats preview card component using flexbox

#accessibility#bem#sass/scss

Ricky• 470

@pyaetheiN

Preview site View code

This is a solution for...

Stats preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Things I learned from this challenge:

picture and source html tags
applying mix-blend-mode: multiply; css property on a CHILD element inside PARENT element with a background propery background-color

Question:

How do I get rid of the small amount of background color overflowing at the bottom of the card image?

Things I learned from feedbacks:

display: block takes all the place that is possible

Community feedback

Kelvin• 915

@Kl3va

Posted about 2 years ago

You can set the display to block/inline-block.

Marked as helpful

Shashree Samuel• 9,260

@shashreesamuel

Posted about 2 years ago

Hey good job completing this challenge

Keep up the good work

Your solution looks great however I think that the overlay does not fit the height of the image mainly because it is in a separate container. I recommend researching the mix-blend-mode css property to achieve the overlay effect

I hope this helps

Cheers Happy coding 👍

Marked as helpful

kxnzx• 870

@kxnzx

Posted about 2 years ago

Hi! Try this in your picture element: display: block;

Marked as helpful

Ricky• 470

@pyaetheiN

Posted about 2 years ago

Oh wow thank you very much it worked like magic!

kxnzx• 870

@kxnzx

Posted about 2 years ago

@pyaetheiN yrw! ;)

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