Skip to content
Submitted over 3 years ago

3-Column Preview Card Component (Flexbox)

George•10
@georgelowe
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

Hi,

Does anyone know why when I use a device with a small screen and my flex-direction is set to column, the cards are off of the screen in the vertical direction?

Thank you, any advice would please be appreciated

Community feedback

  • omisc•115
    @csimomelianPosted over 3 years ago

    The height of the content is higher than the height of the body, where normally it should forces the overflow scroll but by having align-item:center or justify-content:center the flex-items do not cause overflow scroll.

    You can figure out with min-height:100vh instead of height:100vh.

    2
    George•10
    @georgelowePosted over 3 years ago

    @csimomelian Thank you this solved it :)

    0
  • Jorge Flagel•195
    @jorgeflagelPosted over 3 years ago

    Hi, you have align-items: center and height: 100vh in the body. You need to eliminate the height.

    0
    George•10
    @georgelowePosted over 3 years ago

    @jorgeflagel Hi thanks for the response, however I don't see where I have set the width in the body, I have only the height set to 100vh here

    0
    Jorge Flagel•195
    @jorgeflagelPosted over 3 years ago

    @georgelowe sorry, it was my mistake. The problem is actually with the height. If you remove the height, the page shows correctly.

    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