Skip to content
Submitted over 2 years ago

Responsive Stats preview card component using flexbox

Rickyā€¢470
@pyaetheiN
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

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
    @Kl3vaPosted over 2 years ago

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

    Marked as helpful
    1
  • Shashree Samuelā€¢9,260
    @shashreesamuelPosted over 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
    1
  • kxnzxā€¢870
    @kxnzxPosted over 2 years ago

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

    Marked as helpful
    1
    Rickyā€¢470
    @pyaetheiNPosted over 2 years ago

    Oh wow thank you very much it worked like magic!

    0
    kxnzxā€¢870
    @kxnzxPosted over 2 years ago

    @pyaetheiN yrw! ;)

    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