Responsive landing page using CSS Grid

Community feedback

• 

  Eduard Ionescu•510

  @EduardIonescuPosted almost 2 years ago

  Hi, to center it you can give your body element the following css:

  body{
    min-height: 100vh; /* Makes sure your page is 100% of the view height*/
    width: 100vw; 
    display: flex;
    justify-content: center; /* Aligns horizontally*/
    align-items: center; /* Aligns vertically */ 
  }
  

  Another thing you could improve is: try to use <main></main> as your main container instead of <div class="Container"></div>. It won't change the how your code runs, but it's the standard html semantic.

  I hope it helped and good luck coding!

  Marked as helpful

  2

  ---

  

  Edilson dos Santos Ricardo•30

  @EdilsonRicardoPosted almost 2 years ago

  @EduardIonescu Thanks a lot

  1
• 

  Ambe Mbong-Nwi Nchang•550

  @Ambe-Mbong-NwiPosted almost 2 years ago

  Great job. An alternative way to centralize the page is by using CSS Grid: which acts similarly to flexbox.

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

  You can find out more about centering in CSS here

  Marked as helpful

  0

  ---

  

  Edilson dos Santos Ricardo•30

  @EdilsonRicardoPosted almost 2 years ago

  @Ambe-Mbong-Nwi Thank you

  0

  

  Ambe Mbong-Nwi Nchang•550

  @Ambe-Mbong-NwiPosted almost 2 years ago

  @EdilsonRicardo You're welcome. Glad I could be of help.

  0