Technical Documentation Page responsiveness

Code Feedback
1

Again with the media query and responsiveness…I am lost. The FCC example page shows the nav bar becoming a box with its own scroll bar. I’ve looked at its code. I see nothing about it that makes me expect to see that. How can I get the same result? Or just any result that is responsive.

https://codepen.io/lepros/pen/QWgKPvB

2

Remove the position fixed and absolute from the navbar and maindoc and add a display of flex for #container. And add a media query

@media (max-width: 768px) {
  #container {
    flex-direction: column;
  }
  #navbar{
    width:100%;
    height:300px;
    overflow:auto;
  }
}
1 Like
3

Thanks. That got me started. Just a couple of things still to fix.

  1. Why when I click on the nav links does it take me a good bit past the section header? Is it because of the navbar overlapping it? How can I make it land on the section header (visibly) when I click the link?

  2. How can I get rid of the horizontal scrollbar? I’ve tried to shrink things down so nothing is spilling past the sides and I can’t figure out what’s making it keep the horizontal scroll bar.

4

To fix that you have to sacrifice the position:fixed of navbar.

*{
  margin:0;
  box-sizing:border-box;
}
1 Like
5

You may find you need to have position fixed on the nav to pass the tests. I used overflow:auto; to get a scroll bar, auto puts the scroll only where it’s needed so vertical only. You seem to need to put a height on it as well to make it work though I don’t fully understand it. Here’s a link to mine if it would help to see it in action. My code is easier to understand than freecodecamps. Ps I still need to tweek mine a little .
As for where the the links land it sounds like you want to use scroll-padding/margin-top

6

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