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
-
It is height: 100vh
(vh = viewport height unit)
-
You didn’t close the max-width: 28.75em
media query.
-
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.