# Need help with this Technical Documentation Page

**URL:** <https://forum.freecodecamp.org/t/need-help-with-this-technical-documentation-page/254988>\
**Category:** I Built This\
**Created:** [January 28, 2019, 3:52am UTC](https://forum.freecodecamp.org/t/need-help-with-this-technical-documentation-page/254988 "2019-01-28T03:52:49Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![magnoliafico](https://avatars.discourse-cdn.com/v4/letter/m/bbe5ce/32.png) [@magnoliafico](https://forum.freecodecamp.org/u/magnoliafico)\
**Post date:** [January 28, 2019, 3:52am UTC](https://forum.freecodecamp.org/t/need-help-with-this-technical-documentation-page/254988/1 "2019-01-28T03:52:49Z")

</div>

Hi guys, i need help with the Technical Documentation Page. It doesn’t display well on a smaller screen. I tried using display:flex; flex-direction:column to no avail. I also used position absolute for navbar, etc but it just displayed a fixed navbar.

> **[Technical Documentation Page](https://codepen.io/MagnoliaFico/pen/qgEpmL?editors=1100)**
>
> ...

Thank you so much

---

<div class="post-metadata">

**Author:** ![grigoriewna](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/grigoriewna/32/62207_2.png) [@grigoriewna](https://forum.freecodecamp.org/u/grigoriewna)\
**Post date:** [January 30, 2019, 9:42pm UTC](https://forum.freecodecamp.org/t/need-help-with-this-technical-documentation-page/254988/2 "2019-01-30T21:42:12Z")

</div>

#main-doc has no width and the #navbar is currently dramatically narrow. You can give #navbar width using % instead of px (for example 20%), and also give appropriate width to #main-doc (at this case 80%, since 20+80=100).

Also I cannot see any media query here yet? That should work for smaller screens to put #main-doc under #navbar:

```auto
@media (max-width: 430px) {
  body, html {
    flex-direction: column;
  }
  #navbar, #main-doc {
    width: 100%;
  }
}

```

---

<div class="post-metadata">

**Author:** ![magnoliafico](https://avatars.discourse-cdn.com/v4/letter/m/bbe5ce/32.png) [@magnoliafico](https://forum.freecodecamp.org/u/magnoliafico)\
**Post date:** [January 31, 2019, 6:35am UTC](https://forum.freecodecamp.org/t/need-help-with-this-technical-documentation-page/254988/3 "2019-01-31T06:35:10Z")

</div>

thank you for the feedback. i am actually having some difficulty . i will try that code

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [February 7, 2021, 7:26am UTC](https://forum.freecodecamp.org/t/need-help-with-this-technical-documentation-page/254988/4 "2021-02-07T07:26:30Z")

</div>

Closed on February 7, 2021, 7:26am UTC