Technical Documentation project feedback (and a little help?)

[RamiLT]

Well, my project is done. However, something is bugging me (two things, really).

First, when I initially ran my code through the validator, it didn’t find any errors. However, the codepen/FCC test found one, regarding user story 3. I had one h1 element as my main header (the name of the page, “JS Documentation”) and all the section titels as h2 elements. I had to change all the headers to “header” elements to pass the test (which is strange and also, when I run the code like this on the validator, it shows a warning, telling me that i should use h2 to h6 instead)

The other thing that definitely doesn’t look right is that, when I open my page through VSCode’s live server, it shows the full navbar, and there’s even some free space below it. But when i open it on codepen, and i think it’s because of that black bar on the top of the page, my navbar not only doesn’t show as it should, but also, as i didn’t make it to scroll vertically, i can’t see or access the last item in it.

here’s the page

FCC Challenge: Technical Documentation page

[Slimattcode]

Hello @RamiLT ,

I can see all the items on your navbar. And you did program the navbar to scroll when there is not enough space, that’s what this part of your code does:

#navbar ul {
    overflow-y: auto;
    height: 80%;
}

I may be misunderstanding your question, if so please elaborate.
I think it looks nice by the way. Good luck.

[RamiLT]

At least here, when I open the page on Codepen, it looks a little bit different than whhen i open from VSCode on Chrome

I took two screenshots, one showing it opened on codepen and the other with it opened on directly on Chrome so you can see the difference.

[Mikael3211]

Your page looks incredibly perfect, congratulations!

[Slimattcode]

Hello there,

I have found the problem. I search Google for: overflow-y not full height, and very quickly found the solution. Report back, if you need any extra help. Good luck.

[RamiLT]

Thanks, @Mikael3211 !

@Slimattcode I managed to find a way to fix the problem and also make it look like i originally intended. I removed the overflow-y from the declaration, changed the max-height to 90vh and decreased the vertical padding of the li elements by 0.1em so everything looks cleaner. Now it doesn’t show a scrollbar when you open the page on a regular-sized screen (monitor/laptop). The scrollbar only appears wen you open it on a smaller screen;