Skip to content
Submitted over 2 years ago

Responsive Product Preview Card with Flex

Aswin Harikumar•90
@i-am-ashwin
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

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?

Community feedback

  • Shashree Samuel•9,260
    @shashreesamuelPosted over 2 years ago

    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

    1
  • Karol Binkowski•1,640
    @GrzywNPosted over 2 years ago

    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 🤙

    0

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