Skip to content
Submitted almost 4 years ago

Responsive 3 column layout webpage HTML5,CSS3,Flexbox and Grid

Nuray•100
@ganbnuray
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Any advice on the layout would be appreciated. And if there is a way to make the buttons stay on the same line regardless of the content before them would be a perfect tip for me:)

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • darryncodes•6,350
    @darryncodes

    Hi Nuray, another really great solution - well done!

    This is what you'd need to do to push the buttons down to stay on the same line:

    .parent { display: flex; flex-direction: column; }

    .parent .child { flex: 1; }

    I think you may have over-used flex properties in your solution and they're conflicting. Your .wrapper class is redundant, you could just use the .box class for your styles. And you don't need display: flex; on your button for the desired outcome.

    This is an awesome resource by css tricks - great to reference each time you code a solution.

    All the best 🤙

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