3 Column Card using HTML and CSS

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted over 2 years ago

  👾Hello Renardo, congratulations for your new solution!

  I've check your code and discover why wasn't getting centered, you've missed min-height: 100vh in the body. Note that the component (child) align to its parent (the body in this case). To have the proper align you've to give the min-height with some size to get aligned, in this case is 100vh thats makes the container align to the 100% of viewport height.

  See the code changes I did for you:

  body {
      display: flex;
      min-height: 100vh;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }
  
  @media (orientation: landscape)
  .container {
      /* display: flex; */
      flex-direction: row;
      max-width: 1000px;
  }
  .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 18px;
      max-width: 500px;
      /* margin: 10% auto 0; */
  }
  

  👋 I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Renardo Pine•50

  @PinedevsPosted over 2 years ago

  @correlucas Tried it and that works. Thanks.

  1
• 

  Illyaas•700

  @Illyaas4ShowPosted over 2 years ago

  This is a very nice solution, it doesn't even have any issues, Well done!

  • for centering using flex-box, try this:

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

  • That should center it right in the middle and if it doesn't, tell me so I can't check it.

  I hope this helps! Happy coding!

  Marked as helpful

  1

  ---

  

  Renardo Pine•50

  @PinedevsPosted over 2 years ago

  @Illyaas4Show Thank you. I tried it and it works now. Looks like the height property was essential first.

  0

  

  Illyaas•700

  @Illyaas4ShowPosted over 2 years ago

  @Pinedevs Yh that's what I found out too.

  0