Stats Preview Card Component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Jerry, congratulations for your new solution!

  Here's some tips to improve your component card:

  Make the container rounded:

  .overall-card {
      border-radius: 12px;
  }
  

  Make the image rounded:

  img {
      border-radius: 0 16px 16px 0;
  }
  

  To 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%;
  }
  

  To add the exact same purple overlay effect for the image use mix-blend-mode` (the best choice in my opinion). See the code below

  img {
  mix-blend-mode: multiply;
  opacity: 0.8;}
  

  👋 I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  JERRY COMFORTER ASARE•150

  @jcasarePosted over 2 years ago

  @correlucas Thanks for the great feedback. I just applied it and my solution now looks nicer.

  1