FCC Technical documentation page review


I have just finished my technical documentation page:

-There are two issues/questions with this page:

I have put font-size as vh is this a good design choice?

  • Also my sidebar geds resized in godepen although in netbeans everything was fine. What could be the issue?

Your advice will be much appreciated!

Just setting font-size: ...vh is not a good idea in terms of accessibility or usability. For the first one, visually impaired users won’t be able to increase the font size (check this). And for the second one, desktop users would like to adjust the size of the windows for their specific needs; in my case, if I reduce the browser windows’ height to half of it, I end up being unable to read the text in the table of contents.

I get your interest of making such text fluid. But for that you should need to (somehow) set a mimimum and maximum font size which is something not as trivial as we would expect. If you are interested, read the section Controlling Viewport Units To Get Minimum And Maximum Font Sizes in this article.

Also, because you set viewport units to width and height of navbar elements, the page ends up having overflow problems like the ones shown here:

or here, where the height of the nav link text is bigger (because of a long content) than its container:

I didn’t understand this question. I thought there was a problem that made your sidebar change its width suddenly, but size was always fixed for me, independently of the viewport dimensions.


Thank you very much for the review.

Actually I noticed the overflow bug, but did not find a way to solve it.

I set the units to vh of navbar elements because width of my navbar itself is set to vh units. Otherwise I had a bug when I tried to change my navbar, the button elements would get smaller than navbar itself.

On the other hand, if I set navbar to fixed size it is increasing and decreasing depending on zoom. I want the navbar to take a constant fraction of the screen, but evade the overflow problems. Should I use display: grid to solve this?

What would be your advice?

You can assign width: 100% to your buttons, which will make them as long as its parent content. But, again, setting a size (either widht or font-size) using only viewport units it’s too extreme, and will give you bad results (like too small or too big stuff). In the case of font-size, I already gave you some links so you can use such units in a good way. For width, it’s easier: just use max-width / min-width to limit the size of any element.

Well, what’s the problem of navbar increasing and decreasing if you apply zoom on the page? Zooming is used to increase text-size and if text size is increased, then its container (navbar) should increase as well to avoid overflowing.

I think you are overusing vh and causing a whole mess in your content flow, because of that. The only place that needs to use vh is your navbar height.