Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Stats preview card component

Atul Anand 100

@atulanand206

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


  1. How to work with img sizing? As the image does not scale like text does, it becomes hard to manage its responsiveness. How to make it so that img also scales relatively?
  2. As grid layout is pretty much squarish and a non-square image doesn't scale properly, clearly evident from the overlay when the dimensions are changed. How to navigate through this?

Community feedback

@MikeBish13

Posted

Hey, nice job so far. Seem's like a pretty simple fix to me:

  • You also need to set a height on your img so that it fills the container for various screen sizes. height { 100% } should do the trick.
  • Then to make the image scale and not distort you can use object-fit: cover. That should do the trick. More info on object-fit here - https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Hope that helps!

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord