Product Preview Card using CSS flex box

You could use the <picture> element, which allows you to specify @media queries for image sources.

Also, I found it easier and cleaner to develop my layout for mobile -- so the default CSS is targeting a mobile layout. That way, I only need a media query for additional breakpoints I will support. It looks like there's a large range between your breakpoints -- you have one for max-width of 541px and the other one is for min-width of over 1000px -- which leaves both images visible for at least one breakpoint between the two you support.

Congrats on finishing the project.

Haha that was one of the things I got stuck at when I started this project. The comments before me mentioned some awesome ideas that I personally will take a look into.

The way I approached it was using srcset. Allows you to switch between images given the width of the view port. srcset is an html attribute that is added to the img tag. Here is a link from MDN to know how to use srcset (https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).

Anyways that is all.

Congrats, and good luck.

Hey BHARATH MANJUNATH I used javascript to swap mobile pic to desktop. I do not know if you know js but if you do not I would, though regrettably, recommend using background images for the picture.

You can use @media to your advantage this way but background images are unpredictable even up to css standards