Design comparison
Solution retrospective
I started with a mobile first approach, I would not change a thing.
What challenges did you encounter, and how did you overcome them?I was having trouble getting the image to take half of the space in the card. I figured out I need to put flex: 1
on the picture
element instead of the img
element because the picture
was a flex item.
I welcome any general feedback but one question I had was how to use clamp more effectively. How would I decided what should be the min, best and max and if there some ratio to keep to other text on the screen.
Community feedback
- @fish-ladderPosted 6 months ago
I really liked seeing how you changed the cursor to a pointer - that is a detail I had not noticed before!
Since your desktop layout doesn't change size anyway, you could probably just use an exact width on your img of half the card size.
The border radius on your image in the mobile design could probably be tweaked to match the design files a bit more closely.
Overall, I really like your solution and looking at your code has given me some ideas to use in the future. Thanks!
Marked as helpful1@mrcordovaPosted 6 months agoThanks for the tips and yeah I always have trouble gauging the roundness of borders @fish-ladder
1
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