Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:
So basically im currently working on my navigation bar and when I click on the link of the paragraph it drags to the left of the document for some reason. Can anyone help me out please?

In the mean im gonna try and figure it out.

Your code so far
(https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-technical-documentation-page-project/build-a-technical-documentation-page)

WARNING

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/108.0.0.0 Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

please create a codepen with your code copied into it so we can see the code and the effect you are describing.

3

Sorry im not exactly sure how to do that. That’s why shared the link to you. thought it would work.

4

The link will show me my code, not yours.

Just go to codepen.io and create a “pen” with your html and css code. Then share the link here.

5
6

I didnt know about this Code Pen its pretty cool.

Anyways if you click on the links my paragraphs go left for some reason. not sure where it went wrong?

7

here is a fixed version of your pen
https://cdpn.io/pen/debug/XWBWBgy?authentication_hash=GnAnbqgZKKBA#Declaring_variables

Basically the main-doc elements were using an absolute positioning which means it was ‘leaving the regular flow’ of the page. So I removed that and I adjusted the margin/padding based on what looks appropriate.

8

I solved the issue thank you.

1 Like
9

I been stuck on this question for awhile and I don’t see any issues with my .main-section’s:

“Each .main-section should have an id that matches the text of its first child, having any spaces in the child’s text replaced with underscores (_ ) for the id’s.”

I went through all my .main-section elements I don’t find an issue with any of them. Perhaps something i’m missing not sure. I would appreciate the help thank you.

11

there is nothing wrong with the html code (I tested it and it passed for me)
However your css is the issue, because of this line

  #main-doc{
    display: none;
  }

You should not hide the #main-doc because that confuses the test.

12

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