Technical Documentation page - Stuck on Layout test

1

Hi, Please check my tech. doc. page. I’m stuck on layout test, which is failing. Please help. https://codepen.io/farooqumars/pen/JmGpJB

2

It has one more issue:
When I check its responsiveness, text from right side starts cutting out. Why is it happening?

3

your nav spans the page. it should only be on the left side of the page.

1 Like
4

Are you talking about the @media query? The referenced project https://codepen.io/freeCodeCamp/full/NdrKKL has similar functionality for small screen devices. But for wider screen devices, my nav is only 300px wide.

Please elaborate more.

5

When I look at your page on a desktop, your navbar spans the width of the page instead of only the left side. That is why you are failing that test.

6

its realy easy the menu must be from Up to Bottom on left

7

The navbar has to be on the left and position should be fixed, so it is always visible. Also max-width has to be defined not min-width. Try something like this.

#navbar {
  max-width: 15%;
  position: fixed;
}

#main-doc {
  max-width: 80%;
  margin-left: 16%;
}

Your current layout works for mobile though, so make sure to adjust these for responsiveness.

1 Like
8

Guys, thank you very much for the help. I applied your suggestions and those worked. It’s all clear now: https://codepen.io/farooqumars/pen/JmGpJB