# Technical docpage assistance

**URL:** <https://forum.freecodecamp.org/t/technical-docpage-assistance/476135>\
**Category:** I Built This\
**Created:** [September 1, 2021, 11:21am UTC](https://forum.freecodecamp.org/t/technical-docpage-assistance/476135 "2021-09-01T11:21:36Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![TheOctagon3323](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/theoctagon3323/32/136330_2.png) [@TheOctagon3323](https://forum.freecodecamp.org/u/TheOctagon3323)\
**Post date:** [September 1, 2021, 11:21am UTC](https://forum.freecodecamp.org/t/technical-docpage-assistance/476135/1 "2021-09-01T11:21:36Z")

</div>

hey

> **[Techincal document page](https://codepen.io/picklemyrickle/full/KKmYWGM)**
>
> ...

this is my technical doc page so far,  
I have a few questions…

Right now when its on a full screen you can see there is a rectangle at the bottom? Does anyone know why?

2nd, any ideas how to make the nav bar at the top for mobiles? thanks. (using media queries ofc)

---

<div class="post-metadata">

**Author:** ![Jaydog](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jaydog/32/228784_2.png) [@Jaydog](https://forum.freecodecamp.org/u/Jaydog)\
**Post date:** [September 1, 2021, 2:01pm UTC](https://forum.freecodecamp.org/t/technical-docpage-assistance/476135/2 "2021-09-01T14:01:03Z")

</div>

I assume you mean the rectangle at bottom of nav. You have set the navbar to be 100% height but you have not set the a/li items within it to perectly fill that 100%.  
To get them to perfectly fill the space you would need to give nav li and nav header responsive heights like 15% I think rather than padding. But that creates other issues like needing to make the font responsive in your nav header.  
A media query is the best way to get nav at top ie  
`width:100vw;`  
`top:0px;`  
You will then need to also change main-doc from margin left to get it beneath the nav. Several ways to do that. I would likely use grid or flex

---

<div class="post-metadata">

**Author:** ![sowg](https://avatars.discourse-cdn.com/v4/letter/s/8edcca/32.png) [@sowg](https://forum.freecodecamp.org/u/sowg)\
**Post date:** [September 1, 2021, 2:27pm UTC](https://forum.freecodecamp.org/t/technical-docpage-assistance/476135/3 "2021-09-01T14:27:15Z")

</div>

I suggest you try taking the tests for [Responsive Web design](https://www.freecodecamp.org/learn/responsive-web-design/#responsive-web-design-principles) again, because it is very important in web designing.

But here is the code given by fcc:

```css
@media only screen and (max-width: 815px) {
  /* For mobile phones: */
  #navbar ul {
    border: 1px solid;
    height: 207px;
  }

  #navbar {
    background-color: white;
    position: absolute;
    top: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    max-height: 275px;
    border: none;
    z-index: 1;
    border-bottom: 2px solid;
  }

  #main-doc {
    position: relative;
    margin-left: 0px;
    margin-top: 270px;
  }
}

@media only screen and (max-width: 400px) {
  #main-doc {
    margin-left: -10px;
  }

  code {
    margin-left: -20px;
    width: 100%;
    padding: 15px;
    padding-left: 10px;
    padding-right: 45px;
    min-width: 233px;
  }
}

```

---

<div class="post-metadata">

**Author:** ![TheOctagon3323](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/theoctagon3323/32/136330_2.png) [@TheOctagon3323](https://forum.freecodecamp.org/u/TheOctagon3323)\
**Post date:** [September 1, 2021, 2:56pm UTC](https://forum.freecodecamp.org/t/technical-docpage-assistance/476135/4 "2021-09-01T14:56:01Z")

</div>

I’m not sure that is the issue, I think it might something to do with the font-size I chosen, because when I lower the screen to 965px or below the rectangles are gone…

---

<div class="post-metadata">

**Author:** ![TheOctagon3323](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/theoctagon3323/32/136330_2.png) [@TheOctagon3323](https://forum.freecodecamp.org/u/TheOctagon3323)\
**Post date:** [September 1, 2021, 2:57pm UTC](https://forum.freecodecamp.org/t/technical-docpage-assistance/476135/5 "2021-09-01T14:57:55Z")

</div>

I mean I rather not look at the example’s code because they also write it differently than mine, I might go over some lessons again to strengthen some knowledge. But if you’re talking about the responsive web design principles the lessons are quite simple tbh.

---

<div class="post-metadata">

**Author:** ![raven666](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/raven666/32/244865_2.png) [@raven666](https://forum.freecodecamp.org/u/raven666)\
**Post date:** [September 1, 2021, 5:48pm UTC](https://forum.freecodecamp.org/t/technical-docpage-assistance/476135/8 "2021-09-01T17:48:18Z")

</div>

> 2nd, any ideas how to make the nav bar at the top for mobiles? thanks. (using media queries ofc)

as you said with media queries, you can change al navs styles on mobile, so is fixed at top, full width (100%), I suggest you that you add an hamburguer menu for the links.

Check out this guides on mdn, have helped me a lot to understand how to position things as I want to: [CSS layout - Learn web development | MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout) .

About your design, it looks nice but I would add more text and empty spaces, to look more like a document you know several dummie paragraphs and some headings and subheadings.

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [March 3, 2022, 5:49am UTC](https://forum.freecodecamp.org/t/technical-docpage-assistance/476135/9 "2022-03-03T05:49:14Z")

</div>

Closed on March 3, 2022, 5:49am UTC

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.