Skip to content
Submitted over 3 years ago

3-column preview card component

Parthivi•15
@parthiviR
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello everyone, completed my first challenge here. Only issue I faced was related to flex-box. Whenever you hover on the buttons, you can see the little margin increase at the bottom. Apart from that, all things work. Let me know if I could've done something better or different.

Community feedback

  • Account deleted

    I think you should change to mobile view earlier than 375px, because anything over than that, the cards get very long and really small in width.

    1
    Parthivi•15
    @parthiviRPosted over 3 years ago

    @thulanigamtee what max-width do you think would work?

    1
    Account deleted

    @parthiviR I think you should try 670px.

    1
  • Paul James Azanes•75
    @pjazanesPosted over 3 years ago

    Hi, Parthivi, you can use box shadow inset to avoid the unwanted margin that the border gives. box-shadow: 0 0 0 2px white inset;

    0
    Parthivi•15
    @parthiviRPosted over 3 years ago

    @pjazanes cool, will try that. Thank you.

    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