Technical Documentation Page - Build a Technical Documentation Page

Preformatted textTell us what’s happening:
please I need someone to help on how i can stop the left side of the document from scrolling into the right side.
How can iIalso have the scroll side bar beside the #navbar section?
It seems to be working on codepen but not on freecodecamp.

also which media query should i employ?

Below is the link to my page


The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the line above and the line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

@Emcy can you share the exact code in your post I mean along with error?

I played with your codepen and I can see the issue when I click on the table of contents. It seems though your html has some (one or more) mistakes.
They must be fixed first before any progress is to be made.

                    <li>Something has gone wrong causing the image not to display. For example, try deliberately changing the path inside your src attribute to make it incorrect. If you save and reload the page, you should see something like this in place of the image:

This line is missing the end tag.
(Also I noticed that you create li tags but you didn’t nest them inside a ul tag)

There are more. Please click on the “Analyze HTML” menu item in the codepen (it is in the dropdown menu for the HTML editor)

1 Like

and the following mistake is not found by codepen, only through visual inspection:

      <li><a class="nav-link" href="#introduction" #>Introduction</a></li>

you have an extra # symbol at the end of the anchor opening tag. Needs to be removed.

and one more mistake that codepen analyze tool did not find

<meta name="viewport" content="width=device-width,initial-sclale=1.0" />

you have mispelled the word scale

Edit: other thoughts on layout
The layout of the page works only if someone is viewing the page in ‘full screen’ mode all the time. if they change the size of the viewport and click anything in the TOC, the page will refresh and try to re-layout the elements. It will fail to fit everything in though because the viewport width became too small.
I would strongly suggest therefore not using the current layout method and instead switching to a grid layout.
(Review grid layouts here: How to Use CSS Grid Layout – Grid Properties Explained with Examples )

1 Like

Any media query you want to use and is written correctly will work.

1 Like

Very observant. Thank you.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.