Product Preview Card using CSS flex box
Design comparison
Solution retrospective
I want to know the other approach of displaying the different image for Mobile and Web view ? I am happy to take feedback on other best responsive design ways.
Community feedback
- @cbserraPosted over 2 years ago
You could use the <picture> element, which allows you to specify @media queries for image sources.
Also, I found it easier and cleaner to develop my layout for mobile -- so the default CSS is targeting a mobile layout. That way, I only need a media query for additional breakpoints I will support. It looks like there's a large range between your breakpoints -- you have one for max-width of 541px and the other one is for min-width of over 1000px -- which leaves both images visible for at least one breakpoint between the two you support.
1 - @ibra-sanPosted over 2 years ago
Congrats on finishing the project.
Haha that was one of the things I got stuck at when I started this project. The comments before me mentioned some awesome ideas that I personally will take a look into.
The way I approached it was using srcset. Allows you to switch between images given the width of the view port. srcset is an html attribute that is added to the img tag. Here is a link from MDN to know how to use srcset (https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).
Anyways that is all.
Congrats, and good luck.
0 - @BernardusPHPosted over 2 years ago
Hey BHARATH MANJUNATH I used javascript to swap mobile pic to desktop. I do not know if you know js but if you do not I would, though regrettably, recommend using background images for the picture.
You can use @media to your advantage this way but background images are unpredictable even up to css standards
0
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