Stats Preview Card Component Solution

Community feedback

• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi @developer-barcelos,

  Nice job on completing the challenge

  If you replace your body rule with the one below the card will be in the middle of the page.

  body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      width: 100vw;
      padding: 1.5rem;
      background-color: var(--clr-dark-blue);
  }
  

  1

  ---

  

  Douglas Barcelos•120

  @developer-barcelosPosted about 2 years ago

  @hyrongennike Hi @hyrongennike! Thanks for the comment!

  I used display: grid combined with place-items: center and it seems pretty centered to me in all screen sizes I tested it on! Even full HD Screen size!

  I'd rather using grid instead of flex in this case just to save one line of code. The shorter the code, the better... :)

  Thanks for the tip anyway! :)

  0

  

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  @developer-barcelos yeah I see what you mean I invite you to copy all the declarations above open developer tools remove all the declarations on your body rule and add the above you'll see is shift into the center of the page😅

  0

  

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  @developer-barcelos yeah I see what you mean I invite you to copy all the declarations above open developer tools remove all the declarations on your body rule and add the above you'll see is shift into the center of the page😅

  0