Chanel Parfum Product Preview

Community feedback

• 

  Riki Wendri•1,380

  @F4YYPosted over 1 year ago

  Hi @kbthe2,

  Congratulation for successfully completing the challenge, you've done so well.

  There is something you've missed that when on mobile screen, the product picture would adapting and displaying the mobile product picture instead same picture as desktop ones. To resolve this issue you might achieve the image switching based on screen size using the HTML picture element and media queries. Here's snippet code below:

  <div class="product-img">
  <picture>
  <source media="(min-width: 376px)" srcset="./images/image-product-desktop.jpg">
  <source media="(max-width: 375px)" srcset="./images/image-product-mobile.jpg">
  <img src="./images/image-product-desktop.jpg" alt="chanel-parfum">
  </picture>
  </div>
  

  The picture element will provide multiple sources for an image and use media queries to determine which source to display based on the screen size. The img element is the fallback image that will be displayed if the browser does not support the picture element or the media queries.

  Hope that could be Helpful. Kepp happy coding...

  0

  ---

  

  David K. Boateng•50

  @kbthe2Posted over 1 year ago

  Thank you for the helpful tip. Will adapt this method in my subsequent projects @F4YY

  0
• Account deleted

  great job! keep going!

  0

  ---

  

  David K. Boateng•50

  @kbthe2Posted over 1 year ago

  @Katherine2816 Thank you.

  0