@media, css grid

Community feedback

• 

  P

  Justin Connell•720

  @justinconnellPosted 8 months ago

  Hi @vitorialrd,

  Congratulations on submitting your solution!

  I noticed that you did use flexbox in your solution and thought the following resources will be helpful - I included CSS Grid because you asked about grid:

  • FlexBox documented here
  • or CSS Grid documented here

  The trick is to have a container that takes up 100vh (100% of the viewport height) and 100vw (100% viewport width) and then to centre the child element in the container element.

  In your code this can be done with the following changes:

  body {
      background-color: hsl(212, 45%, 89%);
      font-family: "Outfit", sans-serif;
      /* margin-top: 40px; */
  }
  
  .container {
      /* display: block; */
      /* margin: auto; */
      height: 100vh;
      display: flex;
      /* align item vertically */
      align-items: center; 
      /* align item horizontally */
      justify-content: center;
  }
  

  Note, I commented out the unnecessary code above and included some comments on centring the content for convenience.

  To answer your question on CSS Grid, you can achieve the same effect as follows:

  .container {
      height: 100vh;
      display: grid;
      place-content: center;
  }
  

  I hope you find this feedback helpful

  Keep on coding! J

  0