Responsive mobile-first layout using flexbox

Community feedback

• 

  Josh•1,110

  @josh76543210Posted about 1 year ago

  Hi @bfc0,

  Good job completing the challenge. Looks good!

  Here is what you can do to fix the background and prevent the scrollbar from appearing:

  First, set the body min-height to fill the entire veiwport:

  body {
    min-height: 100vh;
  }
  

  Then, replace the margin-top on the main tag in the media-query with padding-top:

  @media (min-width: 900px) {
    main {
      padding-top: 8em;
    }
  }
  

  Then, replace the margin-top on the h1 tag with padding-top:

  h1 {
    padding-top: 2.3em;
  }
  

  Finally, remove the margin-inline: 1em; on the h1 tag and reset margin to 0:

  h1 {
    margin: 0;
  }
  

  The margins were what was causing the scrollbar to appear unnecessarily.

  Hope that helps. Happy coding!

  Marked as helpful

  0