Your Opinion, and Help on Small Screens

Code Feedback
1

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.

2

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
3

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
4

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
5

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

6

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

1 Like
7

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

1 Like
8

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
9

@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.

10

A quarter or a third would be nice.

1 Like