Hi, Please check my tech. doc. page. I’m stuck on layout test, which is failing. Please help. https://codepen.io/farooqumars/pen/JmGpJB
It has one more issue:
When I check its responsiveness, text from right side starts cutting out. Why is it happening?
your nav spans the page. it should only be on the left side of the page.
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.
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.
its realy easy the menu must be from Up to Bottom on left
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.
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