Product Preview Card 1

The max-width property sets the maximum width of the container.

In this case, if you remove the width value from the product-card block, then its width will be calculated automatically by the browser, depending on the content.

Try this code for image:

.chanel-photo {
    object-fit: cover;
    max-width: 100%;
    height: 100%;
}

Image is inline element and so you have to specify its width and height in css to always get the expected result. Read this article on mozilla about images

Hello, Antonio!

Good job! But there is still work to be done!

The product-card block needs to be given a maximum width, in order to round the corners use the properties:

     border-radius: 10px
     overflow: hidden;

If you find it difficult to deal with flexbox, I advise you to play with this game!.

And of course MDN! - This is the best resource!

Next, the card image needs a container to enclose it, and with the object-fit : cover property, you can stretch it across the parent box without losing proportion!

I hope my feedback will help you!

HI @Ablueremote,

Congrats on completing the challenge

Just a suggestion but you can replace you body rule with the following to center the card on the page.

body {
    background-color: hsl(30, 38%, 92%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

👾Hello Antonio Santiago, Congratulations on completing this challenge!

Great solution and great start! By what I saw you’re on the right track. I’ve few suggestions to you that you can consider to add to your code:

1.THE PICTURE TAG is a shortcut to deal with the multiple images in this challenge. So you can use the <picture> tag instead of importing this as an <img> or using a div with background-image. Use it to place the images and make the change between mobile and desktop, instead of using a div or img and set the change in the css with display: none with the tag picture is more practical and easy. Note that for SEO / search engine reasons isn’t a better practice import this product image with CSS since this will make it harder to the image. Manage both images inside the <picture> tag and use the html to code to set when the images should change setting the device max-width depending of the device desktop + mobile.

Check the link for the official documentation for <picture> in W3 SCHOOLS: https://www.w3schools.com/tags/tag_picture.asp

2.Add rounded borders to the left side of the image with border-radius: 15px 0px 0px 15px;

✌️ I hope this helps you and happy coding!