Responsive Stats-preview-card-component

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

👾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!