Responsive Stats Preview Card Component

Community feedback

• 

  PVI•210

  @PVIdubsPosted about 2 years ago

  Hi Viraj Chavan... Great Work... To achieve the same transparency effect in the illustration try:

  mix-blend-mode: multiply; and opacity: 0.8; in the img element...

  I hope it helps you in something... Once again great work and happy coding... ✔

  Marked as helpful

  1

  ---

  

  Viraj Chavan•100

  @viraj308Posted about 2 years ago

  @PVIdubs Thanks! That worked.

  1
• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello Viraj, congratulations for your new solution!

  I saw that you've already fixed the issue with the image overlay, thats nice, an alternative is using filter but they way you did work better

  Make the container responsive with max-width instead of width using width you make the container have a fixed size and with max-width this allows the container to contract and scale with the screen:

  Here's the code fixes I did for you:

  @media (min-width: 1000px)
  .container {
      max-width: 1110px;
      flex-direction: row-reverse;
  }
  

  To improve the image behavior and make it responsive too, T 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%;
  }
  

  👋 I hope this helps you and happy coding!

  Marked as helpful

  0