Card-Component using sass

Community feedback

• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi @peninoule,

  Congrats on completing the challenge

  You can replace your body rule with following one to center the card in the middle of the page.

  body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: hsl(30deg, 38%, 92%);
      line-height: 1;
  }
  

  1

  ---

  

  peninoule•80

  @peninoulePosted about 2 years ago

  @hyrongennikeThanks for the feedback :)

  What's the benefit of using flex instead of grid in that case?

  I have the following body rule and it centers quite well the elements with a bit less of code

  body {
      display: grid;
      place-items: center;
      min-height: 100vh;
      background-color: u.$clr-primary-100;
      line-height: 1;
  }
  

  0

  

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  @peninoule it's not really center horizontally it's centered but not vertically I also see you have another body rule that has the min-height: 100vh which is odd.

  0

  

  peninoule•80

  @peninoulePosted about 2 years ago

  @hyrongennike Ah, I see :) I've made the changes

  the min-height: 100vh is indeed already declared in the css reset that I use.

  Thank you :)

  0

  

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  @peninoule great for simple one dimensional layout or position like menus, alignment etc use flex it's just easier for anything more complex use grid.

  1

  

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  @peninoule great for simple one dimensional layout or position like menus, alignment etc use flex it's just easier for anything more complex use grid.

  0