Product preview card using plain HTML CSS

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 11 months ago

  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!

  Marked as helpful

  0
• 

  Georgi Tashev•550

  @xaocccPosted 11 months ago

  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

  Marked as helpful

  0
• 

  Marcos Travaglini•4,840

  @BlackpachamamePosted 11 months ago

  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

  Marked as helpful

  0

  ---

  

  Conrad•20

  @Jump3rXPosted 11 months ago

  @Blackpachamame Thank you , this I have never thought of, I shall give it a try.

  1