Product preview card using plain HTML CSS

Hello @Jump3rX!

Your solution looks great!

Other than the options that you were given in the previous comments, I have one more option:

• Use the image as the .product-img-container background. I admit it's not the best option, but it gives you a lot of flexibility to manipulate the image. Once you use it as a backgroung, you can set its size to cover. The result is very good.

I hope it helps!

Other than that, great job!

I used this approach: CSS :

img {
    display: table-row;
    float: left;
    width: 50%;
    height: 100%;
}

HTML:

  <div id="content-box" role="main">
    <img id="main-img" src="./project1-data/images/image-product-desktop.jpg" alt="Gabrielle Essence Eau De Parfum" />
    <div id="item-description">
    ...
    </div>
  </div>

You can try also using display: flex for the content-box and display: block for the image. The adjust the image size. Hint: use the inspect element option on the browser right click. You can adjust the CSS in real time and see what happens. Here is my code if you what to compare: https://github.com/xaoccc/xaoccc.github.io/tree/main/project1-data - CSS https://github.com/xaoccc/xaoccc.github.io/blob/main/project1.html - HTML

You can try using the picture tag together with source to correctly apply the image change according to the screen size: [Tag Picture](https://developer.mozilla.org/en-US/docs/Web /HTML/Element/picture)

You also don't need to apply borders to the image, just apply an overflow: hidden to your card class