Responsive product preview card component | html & css

Solution retrospective
I learned how to use the <picture> element and apply media query to image attribute to display a specific image based on the screen size.
To see how you can add code snippets, see below:
<picture>
<source media="(min-width: 768px)" srcset="./images/image-product-desktop.jpg">
<img src="./images/image-product-mobile.jpg" alt="Perfume bottle">
</picture>
What challenges did you encounter, and how did you overcome them?
I had little 2px gap below my image. It took a while to debug. All I did was making the the desktop img height 100%.
What specific areas of your project would you like help with?NA
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@tacesept
nice job👍
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord