Product preview card component using Tailwindcss and NextJS and React

Solution retrospective
Share with me how to modify an image's url based on the size of the display?
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@karthik2265
Hey debjit, well done
The app looks nice.
To modify the URL of an image, you can use JavaScript to do it. There is a method called window.matchMedia(query) which takes a media query like '(max-width: 600px)' as a string and returns object which contains information, the most important key in the object is matches which is a boolean value specifying if the query is satisfied or not.
Check this out: https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
Thank You
Marked as helpful - @The43rdsensei
good one bro
you can also add two different image in your html and toggle display based on the screen you want individual image to appear
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