Skip to content
Submitted about 3 years ago

Stats Card With Sass

rluna15•60
@rluna15
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

I used flex box to organize the text side and image side but for some reason on the mobile layout the image is not displaying correctly. The image is being cut off short but when I change the height of container it doesn't change at all.

Also for the image I am using a background color with a background blending mode to give it the color overlay effect to the image but when it's on the browser the blending mode it not working, hiding the image with the background color.

Community feedback

  • jjjayed•270
    @Jane72-boopPosted about 3 years ago

    I think it should be mix-blend-mode:hard-light; instead of background-blend-mode

    0
  • Sara Dunlop•430
    @RiscloverPosted about 3 years ago

    I'm not sure what you mean by blending mode, but I put an opacity on my image. Maybe if you do the same it'll work? Or use z-index to put it in front?

    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