Product preview card component

Hey great design 👏🏻

I would recommend using em units instead of px on the media queries. These scale better for different devices. But do have a read on how to do this, because the em works on the default 16px, not on what ever you have scaled the fonts down to. It works a little differently, but do check it out on youtube. I hope that helps :))

👾Hello Kaity, congratulations for your new solution!

I saw your solution and I can say you that you've a great solution here, the design is perfect and its fully responsive!

There are 3 things you can do to improve it even more:

1.Use the tag <picture> instead of div to wrap the mobile and design image.

2.Create a media query reducing 20% the font-sizes this way the content have a better fit when scaling under 300px.

3.Create a media query to break the pricing section into two rows to save space:

@media (max-width: 320px) {
.price {
    display: flex;
    align-items: center;
    flex-direction: column;
}
}

👋 I hope this helps you and happy coding!