Product preview card, Responsive design (HTML, CSS, media queries)
Design comparison
Solution retrospective
Overall, I'm quite happy with the result. It was an interesting challenge, and I think I managed to achieve what I set out to do. I’m really eager to get feedback on this work—any comments or suggestions would be greatly appreciated!
What challenges did you encounter, and how did you overcome them?What was challenging? Well, adapting the mobile design turned into quite the adventure! It felt like playing a game where I was the character trying different strategies to find the ultimate solution. Imagine a game where every level is just tweaking image alignments and padding—except with fewer dragons and more CSS. It was both a fun challenge and a rewarding puzzle!
What specific areas of your project would you like help with?I'm looking for guidance on how to align images within a restricted visible area. Specifically, I need to know how to crop images in a specific part of the image, not just centered or aligned with the top or bottom edge. Any tips or techniques for this would be greatly appreciated!
Community feedback
- @salva-itPosted 2 months ago
Congratulations! I have a few suggestions for improvement:
It's better to start the design from the mobile version.
Use CSS variables (root) for color management.
To display images more optimally, use the <picture> tag in HTML.
For font sizes, using clamp() units is more efficient for responsiveness regarding font size.
You can use $ instead of the direct $ symbol to ensure that all browsers display it correctly.
good luck
Marked as helpful2
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