Product preview card component - Mobile first, desktop responsive

Community feedback

• 

  P

  Huy Phan•3,420

  @huyphan2210Posted 20 days ago

  Hi @code269,

  I've reviewed your solution and would like to share some thoughts:

  Use <picture> for Responsive Images
  Instead of using CSS to switch between <img> elements based on viewport size, you can use the <picture> element to handle this more efficiently, reducing unnecessary CSS.

  Instead of this:

  <img class="card__img-mobile" src="./images/image-product-mobile.jpg" alt="Chanel perfume bottle">
  <img class="card__img-desktop" src="./images/image-product-desktop.jpg" alt="Chanel perfume bottle">
  

  Use this:

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

  This approach makes your code cleaner, more semantic, and reduces CSS complexity.

  Improve HTML Semantics

  You can enhance readability and structure by using more appropriate HTML elements instead of <div>:

  • card__content → Use <section> for better semantics.
  • card__text → Use <p> if it represents a paragraph.
  • card__subtitle → Use <span>, as it behaves as an inline element, making it a better fit for short text like tags.
  • The same applies to price-tag__bold and price-tag__small; using <span> is more appropriate than <div>, as they should remain inline.

  Hope this helps!

  Marked as helpful

  1

  ---

  

  Zi•110

  @code269Posted 19 days ago

  @huyphan2210 Thank you very much for your feedback!

  I actually thought I used p and span for those bullet points but checking back in on my code I actually forgot to.

  Thank you for the picture tag suggestion. I was looking for a better alternative than just having two image elements with one hidden at all times.

  1