Skip to content
Submitted 6 months ago

Responsive Product Preview Car using Flexbox

mrcordova•1,260
@mrcordova
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

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-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 helpful
    1
    mrcordova•1,260
    @mrcordovaPosted 6 months ago

    Thanks 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 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