Product Preview Card Component

Hi @eudeees,

Congratulation for successfully completing the challenge... it's so pretty...

There is a little suggestion to make it more similar to given design. To make app adaptive to mobile screens and adjust the image accordingly, you can use media queries and update the image source toimages/image-product-mobile.jpg when the screen width is less than 481px. There are common breakpoints:

• Mobile devices: 320px — 480px.
• iPads, Tablets: 481px — 768px.
• Small screens, laptops: 769px — 1024px.
• Desktops, large screens: 1025px — 1200px.
• Extra large screens, TV: 1201px, and more.

Here's such CSS code snippet (you can adjust and customize it as you want):

@media (max-width: 480px) {
.container {
flex-direction: column;
align-items: center;
}
}

Hope that could be pretty much Helpful. Keep happy coding...