Product preview card component

Community feedback

• 

  evanhill1989•200

  @evanhill1989Posted about 2 years ago

  @KaanKaramese - For many of these challenges you're given an image to use on mobile and then an image to use on desktop.

  Use the media query to hide or display the correct image. Setting the image as the background on desktop isn't the best for SEO and especially inappropriate for a product card. Background images should only be used purely for complimentary design. If an image needs to communicate something specific and important then you shouldn't hide it from search engine crawlers and accesibility apps by placing it in the background.

  Marked as helpful

  2
• 

  Enmanuel Otero Montano•2,155

  @Enmanuel-Otero-MontanoPosted about 2 years ago

  Hello Kaan!

  I would like to tell you that you should use tags with semantic meaning like main, section, article, etc. For example, you could change the div with the container class for a main tag with the same class as the div.

  On the other hand the cart icon on the button is a decorative image, so you should leave the alt attribute empty or insert the image from CSS.

  You always apply font sizes with relative units (you have a rule applied to px .pricing span{ font-size: 14px; }

  When you provide an alt attribute on an img tag and put content on it, try to make that description as close as possible to what the image shows, so users using screen readers can get a better idea of ​​the image, so They will have a better user experience.

  Cheers!

  Marked as helpful

  1