Responsive Product Preview Page with HTML and CSS

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✌️