product preview card component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hola Elio, congratulations for you solution hermano!

  The product card component is good done, but there's some work to do around the responsiveness. Note that your card image its creating a huge gap between the second column in the mobile version.

  My advice for your is using <picture> to manage both desktop and mobile images, importing both <img> using the <source> inside the picture for both images. You've done the import with background-image but isn't a best practice.

  To avoid the product image creating the gap between the text content column you've to delete the fixed height for the img in order to have a regular gap. Note that you don't need to set the image height, this height will come from the its container size, in this case the div.

  See the div thats givin this error below:

  .card__img {
     /* height: 237px; */
  }
  

  Hope it helps and happy coding!

  Marked as helpful

  0