Your Opinion, and Help on Small Screens

<%= @topic_view.topic.title %>
<%= @topic_view.topic.average_rating %> <%= @topic_view.topic.posts.count { |p| !!p.custom_fields['rating'] } %>

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