Responsive Product preview card component using HTML, CSS(Flexbox).

👾Hello John Carlo, congratulations for your solution!

You're having an issue with the component version mobile, when it starts to scale down the text content starts to pop up from the container, because you've set a fixed height, if you want to avoid it just remove the height and let its contents as text and images give the container/div its height.

See what is causing the issue:

.Product-Box {
    /* height: 720px; */
}

Add the color white to the card component to give a little bit of contrast between the background and the card.

Hope it helps and happy coding!

Hi @JohnCarlo952. You could try having the image as the background image for that div, then when you're doing media queries, change the background URL to the mobile image.

Another option is to use the HTML image "srcset" attribute.