Submitted 5 months ago

Responsive Product Preview Car using Flexbox

mrcordova• 1,120

@mrcordova

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

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.

What specific areas of your project would you like help with?

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 Ladder• 140

@fish-ladder

Posted 5 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 helpful

mrcordova• 1,120

@mrcordova

Posted 5 months ago

Thanks for the tips and yeah I always have trouble gauging the roundness of borders @fish-ladder

Please log in to post a comment

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