All comments

• 

  Lea• 160

  @Hatchino

  Submitted almost 2 years ago

  I used for the first time the grid mode to center the card : it's doesn't work.

  I will be glad to any feedback!

  

  Order-summary CSS

  2

  40

  

  Sahil Satpute• 80

  @exploresahil

  Posted almost 2 years ago

  Hello Lea, I saw your code for this challenge. I think you need to define Height to the body element. And position: absolute to .attribution class (if you want it to be included in browser, other wise remove the - div class attribution - from html and css).

  You can try these changes,

  body {
       height: 100vh; /*----------------------> Add height 100% of Viewport---*/
       font-size: 16px;
       display: grid;
       place-items: center;
       font-family: 'Red Hat Display', sans-serif;
       color: var(--Dark-blue);
       background: url(images/pattern-background-desktop.svg) no-repeat;
       background-color: var(--Pale-blue);
       background-size: contain;
   }
  
  .attribution {
       margin-top: 2rem; /*----------> can remove, not needed ---*/
       color: var(--Desaturated-blue);
       position: absolute; /*-----------------------> Add Position - Absolute ---*/
       bottom: 0; /*-----------------------> Will make sure attribution stay at the bottom ---*/
       height: 40px;
   }
  

  I think these changes will center the card to the browser-viewport. Thank you and have a good day.

  1