Responsive product preview card, using flexbox

Hello Adriana ✌️

I have a recommendation to solve your issue with the background.

For responsiveness it is usual to use the Picture-element

• The <picture> element contains two tags: one or more <source> tags and one <img> tag.

• in the <source> tag you can define your media queries

In your case it could look like this:

<picture>
<source media="(max-width:600px)" srcset="images/image-product-mobile.jpg">
<source media="(min-width:600px)" srcset="images/image-product-desktop.jpg">
<img src="images/image-product-desktop.jpg" alt="Product">
</picture>

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Congratulations on completing the challenge! 🎉

Welcome to the platform!

Yes, for projects like this we need to figure out a way to toggle images. There are multiple ways to do that and using background-image property is perfectly fine in this situation. You might want to play with this approach for couple of projects first... and once you are comfortable with the approach and using background shorthand etc. then you may explore other methods.

Your final solution looks nice. However I'd like highlight the following to make it nicer :)

• Looks like there is a typo in the body declaration block height: 100dvh;

• .wrapper may need some top margin for mobile-view.

• Try using more html semantic elements, and avoid divs as much as possible.

Feel free to checkout my live site and project code I've used html semantics and background shorthand.

Once again you have done a wonderful job.

And I look forward to see cool projects from you in the future🚀

Keep at it...💻 Happy hacking!