Product preview card component

Community feedback

• 

  Jesus•190

  @GalindezproPosted about 1 year ago

  De la manera que escribistes las imagenes:

              <img id="desktop-img" src="/images/image-product-desktop.jpg" 
              alt="chanel 
              gabrielle 
              perfume">
             <img id="mobile-img" src="/images/image-product-mobile.jpg" 
             alt="chanel gabrielle 
             perfume">
  </div>```
  
  
  debes eliminar "/" al principio y el css puedes usar "DISPLAY: NONE" en una de las imagines para ocultarla, cuando uses el media query y debas cambiar de imagen le aplicas el "DISPLAY: NONE" para ocultar la imagen que se estaba mostrando y "DISPLAY: INLINE-BLOCK" para mostrar la imagen oculta
  

  Marked as helpful

  0
• 

  Rajaul Islam Ratul•1,250

  @ratul0407Posted about 1 year ago

  @feroztia congratulations on completing this challenge🎉🎉

  It's great but you can make it even better:

  • first you images aren't loading up because of the wrong source try this as the source ./images/image-product-desktop.jpg and the same goes for the mobile image as well
  • To change the image for mobile and desktop versions you can do this

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

  It will display the mobile image as default. But when the screen size increases to 600px or above the desktop image will load up✌

  I hope it was helpful for you👍👍

  Happy coding🙂🙂

  Marked as helpful

  0

  ---

  

  valeriia hashemi•100

  @feroztiaPosted about 1 year ago

  @ratul0407 Thanks!

  1
• 

  AziraalDev•100

  @AziraalDevPosted about 1 year ago

  Hi! Try to update your repo and use "./" instead of "/" at the beginning of path for images.

  Marked as helpful

  0

  ---

  

  valeriia hashemi•100

  @feroztiaPosted about 1 year ago

  @AziraalDev Thanks a lot!

  0