Skip to content
Submitted almost 3 years ago

Responsive Product Preview Card with Flex

Aswin Harikumar•90
@i-am-ashwin
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello,

please give your feedback on how the width and image is managed(i used the picture tag since IE is dead anyway :P).

is this the way to manage the width or should i be setting explicit width for the right side as well?

Code

Please log in to post a comment

Log in

Community feedback

  • Shashree Samuel•8,860
    @shashreesamuel

    Hey Ashwin, good job completing this challenge

    Your solution looks great however I think that the card needs a bit more padding using padding and the value for your border-radius property needs to be decreased.

    I hope this helps

    Cheers

  • Karol Binkowski•1,620
    @GrzywN

    Great job 🙌!

    You can setup a width for the whole container and setup grid with 2 columns using fr units. You can do the same thing with display:flex and flex: 1 properties on each column. These are 2 possible solutions for desktop and depending on what you've used you can use flex-direction: column or grid-template-columns: 1fr.

    Have a nice day and keep coding 🤙

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