Help me with the height of viewport

HTML-CSS
1

Tell us what’s happening:
I am almost done with my projects but am having issue with the height of a viewport, I need help here. I have use different heights but it couldn’t accept it. It keep saying "the height of the welcoming section should be equal to the height of the viewport. This problem is at the welcome section of my project

Your code so far
I have finished responsive web design class and have build four projects am at the 5th one and I counter this challage. I need help

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 8.1.0; Infinix X650) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.96 Mobile Safari/537.36.

Challenge: Build a Personal Portfolio Webpage

Here is the link to the project

Link to the challenge:

2

I pass the test with a 244px height but it’s very narrow for your welcome-section, don’t forget the total height is calculate with the padding which is 10px for this section.

1 Like
3

Here is how I might do it:

  1. Set the top offset on #navbar to 0

  2. Set the height to 100vh on #welcome-section and remove the top padding. Then center the content using flexbox (display: flex, flex-direction: column, justify-content: center)

  3. Remove the top margin on #welcome-div

BTW, // is not how you do comments in CSS you need to use /**/. Only when using a CSS Preprocessor is // a valid comment.

1 Like
4

Thanks @lasjorg this worked perfectly, am grateful for your help.
And for the comments // I intentionally used it since I was testing different heights, I was going to remove it before submitting the project, but thanks anyways for the observation

5

Thanks @nicolas for the quick response I have resolved the issue.