Desktop layout of the stats preview card component

Community feedback

• 

  Brian Wachira•130

  @ItsWachiraPosted about 2 years ago

  Thanks lucas, it works, thanks

  1

  ---

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @ItsWachira I'm happy to hear that, keep it up =)

  0
• 

  Brian Wachira•130

  @ItsWachiraPosted about 2 years ago

  Hi yall, still grasping the CSS styling concepts, got a few issues:

  how do I add the overlay color on top of the image + a guide on best practices on setting media queries

  1
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Brian, congratulations for your new solution!

  ⭐Answering your question:

  To have your image purple with the same overlay effect, you need to use mix-blend-mode to make this color blend between the image and the background-color of the container. See the steps below to apply to the img or picture selector:

  img {
  mix-blend-mode: multiply;
  opacity: 75%;}
  

  Something you keep in mind to add for your next solution is to use relative units as rem or em instead of px to improve your performance resizing fonts between different screens and devices.

  👋 I hope this helps you and happy coding!

  0