Need help with a failed test on my Product Landing Page

1

https://codepen.io/rajeshchandran/pen/vYNOVvB

Hello Campers,

Could someone please help me figure out why my layout is failing for navbar staying at top of the viewport though I have managed to fix it in position?

Thanks!

2

Hello there.

If you look at the test error, it is hinting at what the test is looking for:

#header or one of its children should be at the top of the viewport : expected 16 to be close to 0 +/- 15

The element with id='header' is at a position 16px from the top. The test allows for +/- 15. This is because of this line in the header CSS:

margin: 1.0rem auto;

This is further made evident by the fact that, on your page, 1rem is 16px. So, fix this however you want.

Hope this helps

1 Like
3

@RajR, the failing message is;
#header or one of its children should be at the top of the viewport

You haven’t done anything with the header or any of its children. What if you did something like;

#nav-bar {
  position: fixed;
  top: 0;
}
1 Like
4

Hello @Sky020 Thanks for your suggestion. My tests have passed once I fixed header’s top margin to less than 15px. I guess I need to pay more attention to the error messages moving forward. I appreciate your help.

5

Hey @Roma ,

Thank you for the suggestion. But I fixed my header with the following style for my .main class -

.main {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}

This actually fixed my header to top of the viewport.