Design comparison
Solution retrospective
learned something valuable as i didn't know about the element, actually had the same problem in a personal project of mine so will be going back and retooling it to use that
What challenges did you encounter, and how did you overcome them?how to change the picture on desktop vs mobile, found some guidance in the frontend mentor discord
What specific areas of your project would you like help with?felt kinda iffy on setting the max-width of the card? also what do i do when the window gets REALLY small (like when im using responsive dimensions in devtools and i just keep making the preview thinner and thinner) because that just shrinks the card and it doesnt really stop shrinking.
Community feedback
- @danielzeljkoPosted 6 months ago
Nice work, Irene!~
<picture> <source srcset="images/image-product-mobile.jpg" media="(max-width: 767px)"> <source srcset="images/image-product-desktop.jpg" media="(min-width: 768px)"> <img src="images/image-product-desktop.jpg" alt="Gabrielle Essence Eau De Parfum perfume"> </picture>
We can simplify this by setting the mobile version of the image as the default and only using one source for the desktop image:
<picture> <source srcset="images/image-product-desktop.jpg" media="(min-width: 768px)"> <img src="images/image-product-mobile.jpg" alt="Gabrielle Essence Eau De Parfum perfume"> </picture>
How'd you get the value of
768px
? The readme mentioned desktop resolution was somewhere in the1100px
range.
I honestly don't think you really need to worry about such small window screens. No one will use a phone that has like 100px width, so the shrinkage really isn't a problem. I didn't see this problem on your live version of the site even using the responsive design mode.
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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