Skip to content
Submitted over 2 years ago

Three Column Preview - Responsive for Mobile also - Flexbox

Radomir Josifovic•140
@radomirjosifovic
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

This was a good exercise for practicing multi-column card components. Created utility classes, classes for each box individually, styled it, and after all that just aligned it with flexbox. Had problem with :hover, flex childs started to increase container height, fixed it by adding padding-top: 10px on hover. Why would the container start to grow on hover?

Community feedback

  • Kelvin•915
    @Kl3vaPosted over 2 years ago

    I believe the 1px set on the border while hovering is causing it because the container doesn’t have a fixed height.

    1
    Radomir Josifovic•140
    @radomirjosifovicPosted over 2 years ago

    @Kl3va You're right, if i set the positition right, it fixes the problem. Thanks !

    1
    Kelvin•915
    @Kl3vaPosted over 2 years ago

    I encountered a similar issue while currently working on the bookmark landing page

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

    Hey good job completing this challenge

    Keep up the good work

    Your solution looks great however I think each card needs to be a bit wider

    I hope this helps

    Cheers Happy coding 👍

    1
    Radomir Josifovic•140
    @radomirjosifovicPosted over 2 years ago

    @TheCoderGuru Yeah, I think I should also make them a little bit higher, didn't notice that..

    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