Order-summary CSS

Community feedback

• 

  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.

  1
• 

  Adriano•38,230

  @AdrianoEscarabotePosted almost 2 years ago

  Hello Lea, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

  A good practice to center content is using grid or flex-box, avoid using margin or padding to make placements, use only in the latter case! we can do it like this:

  Flex-box:

  body {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      min height: 100vh;
  }
  

  GRID

  body {
      display: grid;
      min height: 100vh;
      place-content: center;
  }
  

  To improve the code structure wrap this div:

  <div class="attribution">

  with the semantic tag footer

  The remainder is excellent.

  I hope it's useful. 👍

  0