Product preview card: mobile first, responsive units
Design comparison
Solution retrospective
It's a fairly simple design, but there's a wide range of ways to approach it. I tried to keep it simple and responsive and I tried to minimise my CSS as much as possible.
I did this with CSS and flex. I'd probably be interested to try it again with grid and maybe bootstrap to see how different that would be.
What challenges did you encounter, and how did you overcome them?My focus on this exercise was figuring out the best responsive way to define widths. It seems for the mobile version on a small screen it's easy to set the component to 90% of the screen width (or body container etc.). However as the device size becomes wider and we transition to desktop the width needs to be controlled somehow. What's the best approach? I felt that rather than specifying widths on containers it's best to put a width on the widest content you want to control. This appears to be the product name and description. I ended up limiting the max-inline-size of those based on similar character (ch) counts as the spec images. This works and I found you can build a responsive design with flex and flex-wrap set to wrap. However I couldn't think of anyway to switch the images between desktop and mobile versions without a media query. So as I had to use a media query anyway I forced the flex direction switch inside it to ensure the image changes at exactly the same time as the alignment change.
This approach seems to work. But I realise that if you introduced a new product on the same card design with a lot more text the 31ch limitation could make the card's vertical size a lot longer. So I wonder about the best approach here? What is the optimal way to set width and allow the component to adjust depending on the content.
What specific areas of your project would you like help with?I'd be very interested in how others approached the width on this.
I'd also be interested on whether people tend to set all font's based on rem or whether in this design it makes sense to use em and have some fonts scale based on others.
Community feedback
- @aurelienfliegerPosted 17 days ago
You mostly used generic
divelements in your HTML, instead of semantic elements likesectionorarticle: this is harmful to accessibility since a screen reader will not know how to navigate the page properly.You controlled the image displayed by hiding/showing the correct image contextually. An alternative is using the
pictureelement or thesrcsetproperty onimg: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_imagesFor cards with varying content, minmax() combined with auto-fit (in Grid) or setting flex-basis with min-width can give adaptable results. Also, setting a responsive max-width based on viewport units (like vw for width or vh for height constraints) could help in controlling layout overflow.
To avoid a long vertical layout, you could dynamically set line-clamp (with overflow ellipsis) for text-heavy cards and add a “read more” feature.
Generally, rem works best for setting root font sizes, while em is useful within components that need to inherit or adapt based on parent size. For this design, rem would keep everything proportional to a single root size, maintaining consistency, but em for button or card text that depends on container size might give a bit more flexibility.
Marked as helpful0@dearestalexanderPosted 9 days ago@aurelienflieger thank you for all the feedback points. I was working through some of the recommended training materials and went back to implement picture. Very useful.
0
Please log in to post a comment
Log in with GitHub
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