Technical Documentation page - Stuck on Layout test

Technical Documentation page - Stuck on Layout test
0

#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.


#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.


#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