All comments

Lea•160

@HatchinoSubmitted 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

Sahil Satpute•80

@exploresahilPosted 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.