Stats preview card component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello CY CHAN, congratulations for your new solution!

  You've a great solution but there are some aspects to fix. For example the container is not yet responsive and also the image, you can have a quick fix for that replacing the container size with max-width: 1110px and replacing all width inside the css code with max-width: 100% to make the container and items responsive.

  Here's some tips to improve your code:

  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, matching the design files you can use, filter or mix-blend-mode. See the code below

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

  Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/stats-preview-card-vanilla-css-custom-design-text-animation-RfGBFlMpwK

  👋 I hope this helps you and happy coding!

  1