stats-preview-card-component

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello @yagz77, congratulations for your new solution!

  Here's some tips to improve your solution with the overlay image color and responsiveness:

  First of all, the image overlay, to make the image have the exact same purple overlay effect for the image, matching the design files you can use mix-blend-mode. See the code below

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

  Also make your image fully responsive add display: blockand max-width: 100% and object-fit: cover to make the image auto-crop when resizing inside the column:

  img {
      display: block;
      object-fit: cover;
      max-width: 100%;
  }
  

  A better way to manage the component image inserting the tag <picture> instead of a `<div> to wrap both desktop and mobile images together in the same tag, and render each image depending of the device (phone / computer) by the settings for the width you'll insert in the html

  If you're not familiar with the picture tag you can look at the documentation to see how to set it: https://www.w3schools.com/tags/tag_picture.asp

  👋 I hope this helps you and happy coding!

  0

  ---

  

  yağız•170

  @yagz77Posted about 2 years ago

  @correlucas Thank you for the information you have provided and I will make the necessary arrangements

  0