Product preview design

Community feedback

• 

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  Cool solution!

  To improve semantics, make sure to wrap the entire code in the main tag not including header or footer tags. It will help to remove report issues and improve accessibility as well.

  IF THIS WAS HELPFUL PLEASE MARK IT AS HELPFUL 🤩

  Marked as helpful

  1
• 

  Amal Karim ✅•1,290

  @amalkarimPosted almost 2 years ago

  Hi Effy,

  At some point, like in the design comparison above, the image height is shorter than the description area. I think it's caused by this style: align-items: center; of the article element. Change it to align-items: stretch; will make sure the image height is always the same as the description area. But, at the same time, it could change the image proportion at certain width. To prevent that, add this style to the image:

  img {
      object-fit: cover;
  }
  

  •••

  Your shopping cart is affected by the style that you actually want to implement to the main image (while in desktop view). It is affected by this style:

  @media (min-width: 600px) {
      img {
          content: url(image-product-desktop.jpg);
          ....
      }
  }
  

  My advice is you better change the selector for the main image by adding class to the main image, so that it won't affect the cart image anymore.

  Hope this helps. Happy coding!

  Marked as helpful

  1