Product preview card component unoptimised for smaller size
Design comparison
Solution retrospective
Hi, I’ve made it unoptimized for mobile due to the fact that: it’s difficult to change image on src a It requires a square image as most sites do
If I get a square img, I’d be easily able to do this
Please let me know if I did it right By not making it mobile usable. If I ever need to use it for production, I’ll be using square img and optimizing it
Community feedback
- @RickHalmogueraPosted over 1 year ago
OK, the solution to the image issue would be to use the <picture> tag, which will display one image or another depending on the browser width, without the need to use media queries.for the image it. You can find the info here. https://www.w3schools.com/tags/tag_picture.asp
and the code goes like this: <picture> <source media="(min-width:650px)" srcset="img_pink_flowers.jpg"> <source media="(min-width:465px)" srcset="img_white_flower.jpg"> <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> </picture>
0
Please log in to post a comment
Log in with GitHub
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