Technical Documentation project feedback (and a little help?)

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

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.

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.

Your page looks incredibly perfect, congratulations!

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.

1 Like

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;

1 Like