Product Preview Card

Community feedback

• 

  Muhammad Adam•210

  @Muhammad-adam778Posted about 2 years ago

  Try to add the two images to the page at the same time, but one of them should be display: none;(to be hidden) and the other should be display: inline(to be visible), if you are in desktop the desktop image is display: inline; and if you in mobile the mobile image should be display: inline. to make that check this css code below:

  /*Small screens*/
  @media (max-width: 767px) {
      .mobile-img {
           display: inline;
      }
      .desktop-img {
           display: none;
      }
  }
  /*Large screens*/
  @media (min-width: 768px) {
      .mobile-img {
           display: none;
      }
      .desktop-img {
           display: inline;
      }
  }
  

  0
• 

  Taner•190

  @tanererenPosted about 2 years ago

  Hey, well done on completing the project!

  The easiest way to change the picture would be to use the <picture> HTML element - it's a really useful tool that allows you to have multiple images that changes with the viewport width. It saves on writing loads of CSS media-queries for the image!

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

  The browser will look for the first <source> element where the media query matches the current viewport width, and then it will display the proper image (specified in the srcset attribute).

  The <img> element is required as the last child of the <picture> element, as a fallback option if none of the source tags match

  You can find more information: here - w3schools and here - MDN

  Let me know how you get on!

  0