Portfolio help- viewport

I’m having issues with the expectation of " The height of the welcome section should be equal to the height of the viewport."

As you can see, I’ve added height: 100vha; to my #welcome-section. I’ve scoured the forum and I can’t figure out the solution. Any help is appreciated!

Here’s my code: https://codepen.io/colestrong/pen/zVJNLj

1 Like
  1. It is height: 100vh (vh = viewport height unit)

  2. You didn’t close the max-width: 28.75em media query.

  3. If you put the #welcome-section selector inside that media query it will only apply to screens 460px and below which is not what you want, so it needs to be outside it.

@media (max-width: 28.75em) {
  footer {
    flex-direction: column;
    text-align: center;
  }
}
 /* this selector should really be move up in the CSS
  * so it is closer to where it is located in the HTML
 */
 #welcome-section {
  height: 100vh;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
}

Thank you so much for the help! It passes the test now.

Good to hear.

I’d also suggest using the build in syntax checker on Codepen. Press the down arrow to the right of the HTML/CSS code boxes and select “Analyze HTML/CSS”. Just do it every now and then to check your code.