Help: The height of the welcome section should be equal to the height of the viewport

" The height of the welcome section should be equal to the height of the viewport." and " The navbar should always be at the top of the viewport." are the only errors I receive. My problem is I have no idea what they mean, May I get assistance?

link

You’ll want to add the FCC test menu back into your project so we can run the tests ourselves. Also, it is much cleaner and easier to read if you put your CSS in the CSS editor instead of adding it to the HTML.

For the first issue, there are CSS units which allow you to specify the height of an element based on the dimensions of the view port. Are you familiar with these? That’s a big hint as to how to solve this issue.

For the second issue, you have the <header> set to fixed position and then your navbar is at the bottom of the header. I’m guessing that maybe the test requires that the navbar always be at the very top of the view port and thus that extra space in the header between the top of the browser and your navbar is causing the test to fail.

P.S. Your HTML has some errors. Use codepen’s HTML Analyzer to find them.

1 Like

@absurd you’ve received good advice from @bbsmooth. I’m going to expand just a little.

When a test fails click the red button to see which test(s) are failing and text to help you correct the issue.

  • Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.

This message tells you what the test is looking for

The navbar should always be at the top of the viewport.
Navbar's parent should be body and it should be at the top of the viewport : expected 126.875 to be close to 0 +/- 15
AssertionError: Navbar's parent should be body and it should be at the top of the viewport : expected 126.875 to be close to 0 +/- 15

I also need to add that you have elements out of order. Review this for an understanding of the HTML boilerplate tags.

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • For instance, links to fonts go in the box labeled ‘Stuff for <head>’
1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.