Responsive Perfume card using HTML and Css(SASS)

Community feedback

• 

  Mahmood•1,450

  @MahmoodHashemPosted 4 months ago

  Hello there! 🙋🏽‍♂️

  Well done on completing the challenge! ✅

  I must say, your project looks fantastic!

  Here's a helpful suggestion for you:

  📌 When dealing with different versions of the same image, consider using the <picture> tag.

  This can ensure that the appropriate image loads on the user's device, which can save bandwidth and improve performance.

  For instance:

  <picture>
      <source media="(min-width: 768px)" srcset="{desktop image path here}">
      <img src="{mobile image path here}" alt="{alternative text here}">
  </picture>
  

  Explanation:

  • The <source> element specifies the image source and the media query that determines when this source should be used. In this case, the desktop image will be used when the screen width is at least 768 pixels.
  • The <img> element is the fallback option for browsers that don't support the <picture> element. It specifies the mobile image source and the alternative text that will be displayed if the image cannot be shown.

  I hope you find this tip valuable!

  Keep up the excellent work!

  0