Product preview card component

Community feedback

• 

  Rebecca Padgett•1,840

  @bccpadgePosted about 1 year ago

  Hello @Amens11. Congratulations on completing this challenge!!!🎉

  • The reason why your image on desktop and shopping cart icon isn't working is the image src path is wrong
  • To fix the issue you can remove the forward slash on img tag and the image and cart icon will show up:

  <picture class="product-img-side">
      <source srcset="images/image-product-mobile.jpg" media="(max-width: 760px)">
      <img src="images/image-product-desktop.jpg" alt="Perfume">
  </picture>
  
   <button class="btn"><img src="images/icon-cart.svg" alt=""> Add to Cart</button>
  

  • You can add aria-hidden: true; on the image because it is decorative and is ignored by screen readers. CSS 🎨:
  • If you want to component to look similar to the design files you can add the background-color: hsl(30, 38%, 92%)

  Hope this helps you

  Marked as helpful

  0

  ---

  

  Amens11•190

  @Amens11Posted about 1 year ago

  Hi @bccpadge, thanks for your feedback, I have updated my code, hopefully it is working now.

  1