Product preview card component

Community feedback

• 

  Prantik•660

  @prantiknoorPosted over 2 years ago

  Hey Mohamed Metwally, Congratulations! 🎉🎉 You have completed you first challenge in Frontend Mentor.

  I want to give a recommendation to use picture to switch between images.

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

  Marked as helpful

  1

  ---

  

  Mohamed Metwally•50

  @mmetwally0Posted over 2 years ago

  @prantiknoor Thanks man, really appreciate it! Will try it for sure.

  0
• 

  kirolos•0

  @kiroxdPosted over 2 years ago

  Hi Mohamed, your design is great but you can add a line break after "Gabrielle" and a line break after"Eau" to get it looking as close to the design as possible, and you need to add space between every line in the paragraph and you need to some margin at the top of your container

  hope I helped you

  1

  ---

  

  Mohamed Metwally•50

  @mmetwally0Posted over 2 years ago

  @kiroxd Thanks a lot! appreciated.

  0
• 

  Divine Obeten•2,415

  @Deevyn9Posted over 2 years ago

  Hi Mohamed, great representation, your card container would need some margin at the top for mobile, and the margin between the paragraph and pricing needs to be reduced.

  Happy coding 🎈

  1

  ---

  

  Mohamed Metwally•50

  @mmetwally0Posted over 2 years ago

  @Deevyn9 Thank you!

  0

  

  Divine Obeten•2,415

  @Deevyn9Posted over 2 years ago

  @mmetwally0 you’re welcome

  0