@correlucas
Posted
👾Hello Mateo, congratulations for your new solution!
Here's some tips for you:
You need to make the container and also the image responsive by replacing all the width with max-width note that the difference between these two properties is that the first is fixed and the second is variable so with max-width the container is able to contract to fit the screen.
To make your image fully responsive add display: blockand max-width: 100% and object-fit: cover to make the image auto-crop when resizing inside the column:
img {
display: block;
object-fit: cover;
max-width: 100%;
}
Your product card is really good done, there's not much to say about it, but if you want to improve it a little bit more, you can manage the product image inserting the tag <picture> to wrap both desktop and mobile images together in the same tag, and render each image depending of the device (phone / computer) by the settings for the width you'll insert in the html
👋 I hope this helps you and happy coding!
Marked as helpful
