I need someone to point me in the right direction on how to resolve two separate issues with my Technical Documentation Page on the Beta Site (see http://beta.freecodecamp.com/en/challenges/applied-responsive-web-design-projects/build-a-technical-documentation-page for information).
I do not want someone to just post a working solution. I would prefer someone to ask questions that should lead me to a solution.
My code is at http://codepen.io/rmdawson/full/apKGqW/
I believe I may have found a bug with one of the layout tests. I am failing the test that checks if my navigation section is all the way over to the left of the screen for laptop and larger screen sizes. The weird thing is, if I change line 45 of my CSS from “top:85px;” to “top:10px” I can pass the test, but then there is a reason I am using the top:85px for the nav links to stay below my nav header.
The more annoying issue that I can not figure out is how to make my code section have the spacing like a
tag would normally work, but still be responsive as someone manually changes the width of their browser.
No responses yet? There has to be someone who can offer some help.
You made your navbar header fixed (line 62) which is why the navbar and header seem seperate from each other (since the navbar is also set to fixed). Remove that and your navbar links will no longer go under the header when you change the value of
I don’t have a problem with the nav links going under the header. That was by design. The issue is the test is supposed to be testing if the nav element is all the way to the left. It is all the way to the left.
Issue #1 is because the test is just looking at that
top property to see how it’s positioned. It can be 0+/-10px. To pass the test and have the same positioning, change the
top property to 0 and the
padding's top property to 95px.
I don’t understand issue #2 at all. Can you provide an example?
@PortableStick - when I implement your suggestion, the top of the scroll-bar (when there is a scroll bar) goes away. Plus, shouldn’t the test only be looking at the left and not the top per the test’s text description?
For issue #2, if you adjust the window to go below 1300 pixels wide, you will see text and code sections stays fixed and a horizontal scroll bar appears to be able to view the content.