Design comparison
SolutionDesign
Solution retrospective
I really struggled with using two different images for the responsive aspect of this page. It's still not acceptable, but after trying a few different ways, I can't get it to look exactly like the example. What is the easiest way to set up different images to use for different size screens? Thank you for any advice!!
Community feedback
- @adkenneyPosted over 1 year ago
Hi there, congratulations on completing the challenge!
For dealing with an image that changes depending on screen size you can use the
<picture>
element. You can read more about it HereFor example:
<picture> <source media="(min-width:768px)" srcset="/images/desktop.jpg"/> <img src="/images/mobile.jpg" alt=""> </picture>
Marked as helpful1
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