SEMANTIC HTML5, CSS, HTML5 MICRODATA ATTRIBUTES, SCHEMA VOCABULARY

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi Assurance, I think this is the first time I came across the use of schema markup! Glad I saw this, as it prompted me to do a bit of research and reading, so thank you!

  I think you've done well with the responsiveness here; the one main suggestion I have is, instead of using a background image to display the product image, try using a responsive image instead with img or picture with srcset. Since this is a product card, the image is part of the content and should be in the HTML; background images are normally for images that aren't really part of the content and is mainly used as decor. You can try either one of these and which one works best for you (depending on browser):

  // using img
  
  <img alt="Glass perfume bottle placed against a leafy background" 
      srcset="images/image-product-desktop.jpg 600w, images/image-product-mobile.jpg 686w"     
      sizes="(min-width: 540px) 600px, 686px" 
      src="images/image-product-mobile.jpg">
  
  // using picture
  
  <picture>
      <source media="(min-width: 540px)" srcset="images/image-product-desktop.jpg" />
      <img src="image-product-mobile.jpg" alt="bottle of perfume bottle against a leafy background" />
  </picture>
  

  Once you use a responsive image, you won't need a fixed height (which is something I'd suggest removing).

  Marked as helpful

  1

  ---

  

  Assurance Chioma Ikogwe•410

  @Aik-202Posted about 2 years ago

  @elaineleung You are welcome 😁 Thank you very much! I actually had issues sizing the image 😅 I just took a quick escape by using it as a background image, thank you for this, I'll correct that right away. This was really helpful!

  0