Product Card Component.....

Community feedback

• 

  _nehal💎•6,710

  @NehalSahu8055Posted over 1 year ago

  Hello Coder 👋.

  Congratulations on successfully completing the challenge! 🎉

  Few suggestions regarding design.

  ➨ Replace height:100vh to min-height:100vh to properly center the card.

  .product-card-main{
  min-height: 100vh;
  }
  

  ➨For non-decorative images give meaningful and descriptive alt like alt= "Gabrielle chanel Perfume product of london".

  ➨It would be better if you use source media for switching to screen sizes(mobile or desktop) for image.

  <picture>
  <source media="(min-width:800px)" srcset="yourimage.jpg">
  <img src="yourimage.jpg" alt="description">
  </picture>
  

  ➨ Use responsive units(rem, em, %) from next project. Explore respective use cases on google.

  link.

  ➨ You can use accessibility features like aria, sr-only, and title which are accessible to screen readers.

  I hope you find this helpful.

  Happy coding😄

  Marked as helpful

  0

  ---

  

  Syed Bilal•260

  @syed-bilal205Posted over 1 year ago

  @NehalSahu8055 it is soo kind of you that you highlight my mistake it will be soo much helpful for my future challenges thankew❤️🔥

  1