Product preview card component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾 Hello Muhammad! Congratulations for your solution!

  You've some issues with your product component, I'll give you some tips:

  1.You've wrapped 2 images inside the tag <img> is better you used <picture> for multiple images and devices versions.

  Your code with <picture> tag will look like the code below:

  <picture>
    <source media="(max-width:650px)" srcset=images/image-product-mobile.jpg">
    <img src=images/image-product-desktop.jpg" alt="Perfum" style="width:auto;">
  </picture>
  

  2.You don't need to set the image height if you add display: block; the image will have automatically 100% of the container height.

  3.Your mobile version is working good, but you've to set some different font-size for the h1 and p, these texts are slightly smaller in comparison to the desktop version.

  Hope it helps, happy coding!

  Marked as helpful

  1

  ---

  

  Wesley•330

  @wesleyjacobyPosted over 2 years ago

  @correlucas Hi Lucas,

  I just wanted to quickly say that I love reading your comments on other people's code. I learn so much from them.

  Keep up the great work!

  1

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @wesleyjacoby You're welcome Wesley, I'm happy to hear that.

  0

  

  Muhammad Uzair•30

  @muhammaduzair11Posted over 2 years ago

  @correlucas Thank you for the precious time which you gave me and taught me something. I will try my best with these tips

  0