Huddle-landing page with flexbox

Community feedback

• 

  Alex•660

  @al3xbackPosted almost 3 years ago

  Hi Morden,

  Looks like in larger screen this needs to be improved.

  • step 1: set minimum height to body to cover at least the same as browser height and set background-size to fill it.

  body {
     ...
     min-height: 100vh;
     background-repeat: no-repeat;
     background-size: auto 100%;
  }
  

  • step 2: for better html structure, let the <section> tag out of <header> tag and then wrap with <main> tag. The structure will be like this:

  <header>
     <nav>...</nav>
  </header>
  <main>
    <section>...</section>
  </main>
  <footer>...</footer>
  

  0