Design comparison
Solution retrospective
Thanks to all that review my code!
In this challenge I learned how to use css media queries for responsive design / mobile compatible. I still have not found a way to change the src url depending on screen size but resorted to an aspect ratio and image cover to properly display the image on small screens
Community feedback
- @dusan-bPosted almost 2 years ago
Hello Luke,
you can allow the browser to choose the appropriate image regarding the screen size by using the
<picture>
element.You could do something like this:
<picture> <source srcset="./images/image-product-desktop.jpg" media="(min-width: 900px)"> <img src="./images/image-product-mobile.jpg" alt=" Some alternative text"> </picture>
This way the browser will load the desktop image if the viewport width is equal to or greater than 900px, and otherwise it will load the mobile image. You can also add more image versions by adding multiple
<source>
elements.I would also consider to make the image accessible to screen reader users, since it's an essential part of the content. However, if you want to hide an image from screen readers, you should simply leave the
alt
attribute empty.aria-hidden="true"
would be redundant in this case. The support of ARIA varies among browsers and screen readers and is in most cases not as reliable as plain HTML solutions.Hope this helps. Keep it up, and happy coding :).
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