Product Preview Card Component

Community feedback

• 

  Ahmed Mohamed 🇵🇸•310

  @ahmedafsaPosted 12 months ago

  Hello @Saitenhexer, Good job!

  You can employ the <picture> element with <source> tags and media queries to make the product image responsive

  • HTML:

  <picture>
    <source
      srcset="images/image-product-mobile.jpg"
      media="(max-width: 600px)"
    />
    <source
      srcset="images/image-product-desktop.jpg"
      media="(min-width: 601px)"
    />
    <img src="images/image-product-desktop.jpg"/>
  </picture>
  

  • CSS:

  @media (max-width: 600px) {
    .your-grid-container {
      grid-template-columns: 1fr;
    }
  }
  

  Marked as helpful

  0

  ---

  

  P

  Stefan•90

  @SaitenhexerPosted 12 months ago

  @ahmedafsa

  Thank you! Thats is a nice way to change the picture!

  I will try it :)

  0