All comments

• 

  Lazar Ristic• 80

  @lazza24

  Submitted almost 2 years ago

  The biggest challenge was to change the image while using @media queries. The solution was to put both images on mobile size with two classes and use display none depending of size

  

  Product preview card component

  3

  90

  

  Samuel Mantey Asare-Adjei• 40

  @sam-mantey

  Posted almost 2 years ago

  Hello Lazar Ristic. You have done a great job so far.

  Try using the <picture> tag when you need to change images based on different devices. This prevents the web browser from loading both images and hence reducing bandwidth.

  **Example

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

  0