Build a Technical Documentation Page

Tell us what’s happening:
I write the code which has the same responsive effect as the example, However, i couldn’t pass

User Story #14: On regular sized devices (laptops, desktops), the element with id=“navbar” should be shown on the left side of the screen and should always be visible to the user.

I checked Youtube, find MDN, search google, I couldn’t find the answer, could anyone help me?

Below is what I wrote, hope any senior could give me a hint where shall I amend

Would like to thank you in advance for helping

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.79 Safari/537.36.

Link to the challenge:

1 Like

To be always visible the navbar element needs to be fixed, (display property). Then to be at the left, I think it needs to be at 0px offset from the left, or floated to the left.

Actually I did tried, position: fixed

The main-doc overlap with navbar afterwards

I need to think a way to set both main-doc and navbar to be block

Coding so fun and challenging

I have changed some of your CSS. Now it works.

body {
line-height: 1.5rem;
font-family: ‘Roboto’, sans-serif;

#navbar {
border-right: solid;
border-left: solid;
border-color: #999;
/* position: fixed */

.nav-link {
list-style: none;
line-height: 40px;
display: block;
padding: 5px;
border: 2px solid #ddd;

.highlight {
background-color: #eee;
display: inline-block;
margin: 10px 0px;
padding: 5px;
width: 100%;

code {
font-size: 1.5rem;

header {
font-size: 1.5rem;
line-height: 50px;
padding: 5px 0px;

@media screen and (max-width: 500px) {
body {
grid-template-columns: 1fr;
grid-template-rows: 1fr auto;

#navbar > a {
text-decoration: none;
color: #000;

1 Like

Yes the test is passed. However, when it’s reach smaller screen, the media query seen not working.

I really appreciate your help, I think we only can pass this test with fixed position but not grid.

Thank you for taking your time to help me this

If you want to use grid, you should set grid template areas and use them for styling.

  grid-area: nav
  grid-area: main

After setting, you can use as this:


here is a very brief and good page for this:


Thanks for your suggestion, I think i going to style it again entirely when I free. Coding is so fun

1 Like

Hi, I am currently arranging the technical documentation page through freecodecamp, and I am on user story 4. It’s asking to use ids for the corresponding header for each section element:

Would this be the correct way to complete this portion of the challenge


i am stuck in my technical documentation page. user story #14: on regular size devices navbar should be at left side and should always be visible to the user. here is the link.

thanks in advance

No. There are 2 tests failed.

it’s awesome you want to contribute, but maybe check more recent topics? this one is from 2 years ago