responsive product preview card

Community feedback

• Account deleted

  👋 Hey, @istiefanus!

  Use <picture> for Responsive Images

  <picture>
    <source srcset="images/desktop.jpg" media="(min-width: 48rem)">
    <source srcset="images/mobile.jpg" media="(max-width: 47.99rem)">
    <img src="images/desktop.jpg" alt="Product image">
  </picture>
  

  The HTML code above tells the browser to use images/mobile.jpg when the viewport width is less than 48rem. Otherwise, it will use images/desktop.jpg as the default image.

  You don't need to use display: none; on specific breakpoints, as the <picture> element automatically selects image according to media=""

  If you want to learn more about <picture>, here is greet doc from MDN. 📚

  I hope this helps you. 😊

  0