Design comparison
SolutionDesign
Solution retrospective
I'm curious.. for card image should I use <img> element or background: url(./../..) css property. Because when setting image via <img> src attribute I used js to switch between desktop and mobile version of image
Community feedback
- @FarisPalayiPosted over 3 years ago
Hey, nice job on this oneπ.
You don't need to use js to change the image to make it responsive.
- You can use the html
picture
tag with thesource
tag, and you can set a media query breakpoint using media attribute. It would look something like this:
<picture> <source media="(min-width:920px)" srcset="desktop-img.png"> <source media="(max-width:400px)" srcset="mobile-img.jpg"> <img src="fallback-img.jpg" alt="image"> </picture>
Or you can use the srcset attribute on the img tag itself.
- And also, if you wanna use
media queries
in js, instead of usingoffsetWidth
, you can use the nativewindow.matchmedia()
method. Like this:
const mediaQuery = window.matchMedia( '( min-width: 768px )' ) if ( mediaQuery.matches ) { console.log('Media Query Matched!') }
Learn more: A Complete Guide to CSS Media Queries - css-tricks, window.matchmedia() - MDN
Marked as helpful1@SasaVaticPosted over 3 years ago@FarisPalayi I appreciate your feedback. It helped me improve my code, thank you!
1 - You can use the html
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