Build a Technical Documentation Page

Build a Technical Documentation Page
0
#1

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:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page/

#2

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.

#3

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

#4

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;
left:0;
height:100%;
width:23%;
/* 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;
}
#main-doc{
margin-left:25%;
padding:5px;
}

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

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

#5

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

#6

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

#navbar{
  grid-area: nav
}
#main-doc{
  grid-area: main

After setting, you can use as this:

display:grid;
    grid-gap:20px;
    grid-template-areas:
      "nav"
      "main";

here is a very brief and good page for this:

#7

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