Flex-box

Community feedback

• 

  Harshit Bhardwaj•90

  @harshitBhardwaj97Posted about 1 year ago

  I saw your code and found that you wrapped the entire code inside the class design-container and in gave it height of 650px :-

  .design-container {
      display : flex;
      align-items : center;
      height : 650px;
  }
  

  You can refrain from restricting the height of parent container, and for centering the content vertically, you can use this approach :-

  .design-container {
      display : grid;
      place-content : center;
      min-height : 100vh;
  }
  

  Or you can also do :-

  .design-container {
      display : flex;
      align-items : center;
      justify-content : center;
      min-height : 100vh;
  }
  

  I hope you find this suggestion helpful and it solves your problem, Happy Coding !

  Marked as helpful

  1

  ---

  

  Enrikewoq•20

  @EnrikewoqPosted about 1 year ago

  VERY HELPFULL thank you sm! haha i was trying to be the most accurate possible thanks!@harshitBhardwaj97

  0
• 

  P. Ricardo•2,370

  @pRicard0Posted about 1 year ago

  You should add this to your body:

  body {
      min-height: 100vh;
      justify-content: center;
  }
  

  You can also add a box-shadow to your .design

  .design {
      box-shadow: 0px 7px 14px #0000001a;
  }
  

  Marked as helpful

  1

  ---

  

  Enrikewoq•20

  @EnrikewoqPosted about 1 year ago

  Thanks sr, i will, your commet is really helpfull@pRicard0

  0
• 

  Zeus Tenerife•80

  @zakura1xPosted about 1 year ago

  I think to center the card you can add min-height:100vh to the body css

  Marked as helpful

  1

  ---

  

  Enrikewoq•20

  @EnrikewoqPosted about 1 year ago

  Thank you sm i will!! @zakura1x

  0