Overlapping text on a documentation page

Code Feedback
1

https://codepen.io/amira1ayah/pen/QWKQoJa

The two texts in the nav-bar and the article overlap when the screen shrinks until the media query is applied. I used grid to group them but still they are overlapping. Help!

2

Try and and move your @media to the bottom of your css and give your at media navbar position

#navbar{
position: relative;
}

See if that makes any difference.

1 Like
3

You don’t have the grid-template-columns property set correctly. Specifically, you have too many columns defined and I’d argue that the values you are using are not what you really want.

1 Like
4

Thank you! it is finally fixed.

5

but…

It is passing all the tests but the navbar now disappears when you start scrolling.

6

Technical Documentation Page

This is the freecodecamp one. If its what you mean, then it dissappeares to and you’ve met the requirement.

7

The user story says the navbar should always stay on the left side. and on the FCC one too the navbar stays at its place when scrolled. but mine isnt fixed yet it is passing all the tests. wouldn’t that be a problem?

8

Is it moving when at media is above 600px?

9

when it is below 600px it stays at the top. but when it is on desktop size it doesn’t stay fixed on the left side.

10

Yeah Ive checked it, it still need fixing. Nevermind my advice.

11

Thank you for your time though. I will try to figure it out.