Skip to content
Submitted over 2 years ago

Responsive 3-column/rows component using flexbox

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

Solution retrospective

Hello and thank you for taking a look at my solution.

Please share your feedback! I appreciate it very much.

I am quite happy with how this solution looks, however there is one thing that I could not figure out so I just left it as it is - when there is no border on the body, a vertical scrollbar appears (and quite a lot of empty body space is added below the footer), despite the fact that all of the contents in theory fit within the viewport height. As soon as I set the body border (it is currently set to be 1px solid transparent) the scrollbar disappears. I know it is happening because I must have done something wrong, but I can't figure out what - so if you know, please tell me so I can avoid this in the future.

Once again, thank you very much!

Code

Please log in to post a comment

Log in

Community feedback

  • Karol•1,620
    @karolbanat

    Hi @Shha5. Good job completing this challenge 🎉.

    About your question: the space that appears when you remove the border from the body is because of the (vertical) margin you set on .container (15vh in magin: 15vh 24vh 15vh 24vh). It, if I am correct, is called collapsing margins. The border you set on body acts like a 'cushion' for margin on .container and it doesn't 'leave' the body. But if you remove the border, you remove that 'cushion', and then that margin escapes body and is causing body to shift too. You can see that if you change border into outline property and give it colour (for example instead of border: 1px solid transparent set outline: 1px solid firebrick). Outline doesn't count into box model so it won't affect collapsing margins. And because your body has minimal height set to 100vh (min-height: 100vh), it's like body has height of 115vh (100vh (body) + 15vh (leaking margin on top)). And this is the cause of that space [inspect the margins on container in dev tools after setting outline).

    In your case removing min-height from body will remove that problem. But it will still move the body.

    Also I would recommend not relaying on viewport units too much.

    It's a lot to explain so I don't know if i did it right. Hope it helps.

    And here is link to Kevin Powell's video about collapsing margins.

    And once again, congratulations on completing this challenge and happy coding. 😊

    Marked as helpful

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