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

Product preview card component

@renanrdsouza

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I'm still having some difficulties with grid layout and flexbox, but particularly in this project my main problem was the image of the product witch caused a little headache hehe Fortunately, with a little search in other repositories I've found a solution that helped me with my project.

Any suggestion to improve the code will be gratefully acepted :D

Community feedback

@Ikuewumi

Posted

Hi 👋. The solution looks pretty nice, and about the image, you might want to check out the css object-fit property which allows you to control images precisely: their width, height and all that stuff. So for an example:

img {
  object-fit:cover;
  width: 400px;
  height: 100%;
  object-position: top center;
}

To know more you could check out the MDN page on object fit

Happy coding, Ayobami

Marked as helpful

1

@renanrdsouza

Posted

@Ikuewumi

Thanks, buddy! I apreciate your tip!

0

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