Responsive Product Preview Page with HTML and CSS

Community feedback

• Account deleted

  Hello Coder🙂

  your solution is great 🎉

  But you used the wrong method to switch images and there are some better ways are available to handle the image switch problem

  You can try <picture> tag to switch image

  Picture tag :

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

  min-height :

  You can use min-height instead of height

  because height will put your element to a size of 100% of it's container. min-height will put the element to min 100% of the container size.

  and it will helpful when you want to make responsive solutions

  and you also can take a look of my solution✨ that will definitely going to help you 👀

  I hope that will be helpful for you✌️

  0

  ---

  

  France•100

  @LanXhanPosted over 1 year ago

  @MrSandipSharma Thank you so much for the advice! Will edit my solution to this!

  0