Portfolio help- viewport

#1

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
#2

  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;
}
#3

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

#4

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.

#5