Product preview card component responsive using only css

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Eliezer, the space comes because img and picture are more like inline elements than block ones unless you specify. Try adding this to the top of your CSS under the * rules:

  picture, img, svg {
    max-width: 100%;
    display: block;
  }
  

  Two other quick comments:

  1. The desktop image looks distorted right now, so try to add a object-fit:cover on the img.
  2. You only got the mobile image right now; try adding the desktop one within the picture element so that the browser can switch to it at the breakpoint, like this:

  <picture id="product">
      <source media="(min-width: 620px)" srcset="images/image-product-desktop.jpg" />
      <img src="images/image-product-mobile.jpg" alt="picture of lotion ">
  </picture>
  

  Well done overall!

  Marked as helpful

  0