Responsive Stats-preview-card-component

Community feedback

• 

  Ahmad_Mana•320

  @UserAhmad2001Posted about 2 years ago

  Hello Oshane 👋

  If you want to keep the image from scaling down horizontally, you could use the css property object-fit like this :

  • object-fit: contain ; in this state the top and bttom of the image will remain in place.

  • object-fit: cover ; in this state the right and left of the image will remain in place.

  Try it out, If you have any questions, Feel free to ask

  Marked as helpful

  1

  ---

  

  Oshane•130

  @Noid3ahPosted about 2 years ago

  @UserAhmad2001 i would have to add the image as a background-img correct?. I will give this a try, thanks!

  1

  

  Ahmad_Mana•320

  @UserAhmad2001Posted about 2 years ago

  @Noid3ah

  If you add it as a background-image, you should use the css property background-size: contain ; or background-size: cover ; , the above solution is used with the image elements, to achieve the same result.

  Fell free to do it however you like.

  GOOD LUCK👍

  1
• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello Oshane, congratulations for your new solution!

  I did this same challenge and I had many issues with the image resizing. My advice for your is to use grid because its better to manage everything, for example:

  You create this component with two columns with max-width: 1110px; (its the component size) and grid-template-column: 1fr 1fr; to create two columns automatic with 50% each. Doing that you don't need to manage the inner divs sizes and to manage the rest is really easy.

  Here's my solution link if you want to check how I built everything: https://www.frontendmentor.io/solutions/stats-preview-card-comp-pure-css-custom-colors-and-gradient-text-I2kqEpQIPj

  To add the exact same purple overlay effect for the image, matching the design files you can user, filter, background-blend-mode or 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

  1

  ---

  

  Oshane•130

  @Noid3ahPosted about 2 years ago

  @correlucas Thanks a lot! I will try to get up to speed with grid as soon as possible. Would you recommend using grid in all scenarios?

  1