Technical Documentation Page Feedback Please!

Code Feedback
1

Hi guys,

Can i have feedback on my doc page?

Much appreciated.

https://codepen.io/akmalist/pen/GXXQmd

2

The horizontal scroll bar at the bottom seems to make the contents of the page go straight into the sidebar:

image
image1359×616 36.8 KB

The left sidebar is also not completely showing up on my screen. (It’s a bit cut off at the bottom.)

1 Like
3

Hi @akmalist

Your page looks good in desktop :slight_smile:

Doing the project and passing the test might be first priority, but once you pass it, you can try many new things on your page, major thing is, you miss responsiveness here. You can convert this to all devices, through that you will gain some more knowledge.

I wanted to point out the same as @katieyang did, and i would like to suggest some.

Since you have given your #main-doc an absolute positioning, when the link is clicked the content is showed and also it overlaps the navbar.

  1. Remove the position: absolute from #main-doc and
  1. Apply overflow-x: scroll to the code ( because after you do the first step, horizontal-scrollbar appears since the code block in your Attribute Selectors section overflows
  1. Give your #navbar, top and bottom to 0 and apply overflow-y to scroll, to make it scrollable.
1 Like
4

Thanks @Sujith3021 and @katieyang for your suggestions.