3-column-preview-card-component

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 12 months ago

  Hello, Joe!

  Very nice project! It looks great!

  I have a quick tip for you!

  You can place your card in the middle of the page by doing this:

  body {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;    
  }
  

  If you do that, you don't need to use margin-top to place your card in the middle! It's simple and helps a lot. I hope it's useful!

  Other than that, great job!

  Marked as helpful

  1

  ---

  

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 12 months ago

  @danielmrz-dev Since the body has 2 children (main and footer), it also needs a flex-direction: column, as we don't want the children to be side by side (default value of flex-directon is row). So, it might be a good habit to include that one as well, even if the Flex container only have 1 child.

  I would also add that height should be min-height. This allows the body to grow vertically beyond the viewport, if needed.

  0