Responsive stats card using HTML and CSS

Hi, Jaron! 👋

Good effort on this challenge! 👍

About the overlay,

• First, I would recommend using mix-blend- mode to create the overlay instead of adjusting the opacity of the image.
• Second, you could try using object-fit property to make the image has full width and height.
• Lastly, I would recommend seeing the @DarrickFauvel's solution for this challenge. He has done a great job on taking care the image overlay.

Some areas that you could improve.

• Set a min-height instead of a hieght on the .container. Currently, on mobile landscape card is getting cut off and I can't scroll to see the rest of the content.
• On mobile view, to be specific 360px * 640px, the .attribution is showing up above the card element.

I would recommend writing the styling using the mobile-first approach. It often leads to shorter and better performance code. Also, mobile users won't be required to process all of the desktop styles.

That's it! Hope you find this useful! 😁

hi there,

• to fix the issue give the card-graphic width:100% and also the image width:100%; and the issue will be fixed