Your Opinion, and Help on Small Screens

Hello everyone,
Hope you are doing well.
What do you think of this page (Technical Documentation Page)?
And What to do more for small screens?
N.B: I copied the contents of the exam page (JS Documentation)
Technical Documentation Page

Thanks in advance.

Nice font and color.

I am not super good at responsivity, but I’ll try to help you.
The text “JS Documentation” is stabbing into other things and I don’t think <header> is the right tag.

change the your css to the code I give you:

for you nav styler, replace it with this:

nav{
            width: 23%;
          height:100%;
          overflow:auto;
            background-color: #f0f4ff;
            padding: 1%;
            padding-left: 0%;padding-right: 0%;
            padding-top: 0%;
            text-align: center;
            position:fixed;
            top:0;left: 0;height: 100vh;
            /*height of the nav is 100% of the viewport height*/
            
        }

It will help with spacing out the links properly.

1 Like

I would highly suggest creating a collapsable navbar for your links once it gets to smaller screen sizes, as it is impossible to read and select the correct links on any small devices.

1 Like

Thanks Conner, I played with it for awhile, I still have a problem with the nav scroll bar, I’ll try with it later.
Below is the updated pen:
JS Technical Document

1 Like

Hi s0ukke05, thanks for your advice, I’ve been trying to do that for awhile now, it looks better now with the use of javascript, but still have a problem with the scrollbar in the nav.
updated pen:
JS Technical Document

I’ll try to help you fix it later in the day if I have time.

1 Like

@ConnerOw1115 thanks alot, I have just done it with the help of javascript.

1 Like

SO much better!
I’d just suggest the pop-out-of-the-side window to be thinner when it comes out because it covers like the WHOLE page.

1 Like

@ConnerOw1115 Thanks alot for your time, the nav takes 90% of the width of the screen, I’ll decrease to half of the screen width. Thanks again for your time.

A quarter or a third would be nice.

1 Like