Product preview using html and css

Community feedback

• 

  Maximilian Dybvik•200

  @RegexRiddlerPosted 7 months ago

  Hi there, and good job on your submission! There is one thing I wish to point out in your code other than the slight size difference:

  <div class="product-Image">
    <img src="Images/image-product-desktop.jpg" alt="DesktopImage" class="DesktopImage">
    <img src="Images/image-product-mobile.jpg" alt="MobileImage" class="MobileImage">
  </div>
  

  This works, but it makes the browser load both images regardless og screen size. What you could do instead is to only have one img tag in your html with the src attribute pointed to the most likely image that needs to be loaded, likely the mobile image, then you change the src content with your css like this.

  <img src="Images/image-product-mobile.jpg" alt="perfume bottle laying between leaves" class="MobileImage">
  

  @media (max-width: 375px) {
    .MobileImage {
      content: url(Images/image-product-mobile.jpg);
    }
  }
  

  Now when a user visits your website on mobile it only loads the mobile image but as soon as the viewport gets larger than 375px it will replace the image with the one ment for desktop.

  Marked as helpful

  0