# Technical Documentation Page (Flex) Feedback

**URL:** <https://forum.freecodecamp.org/t/technical-documentation-page-flex-feedback/261408>\
**Category:** I Built This\
**Created:** [February 26, 2019, 9:25am UTC](https://forum.freecodecamp.org/t/technical-documentation-page-flex-feedback/261408 "2019-02-26T09:25:18Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![maria\_coding](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/maria_coding/32/109941_2.png) [@maria\_coding](https://forum.freecodecamp.org/u/maria_coding)\
**Post date:** [February 26, 2019, 9:25am UTC](https://forum.freecodecamp.org/t/technical-documentation-page-flex-feedback/261408/1 "2019-02-26T09:25:18Z")

</div>

This is my Technical Documentation Page

[https://codepen.io/MariaIo/pen/yZmOWx](https://codepen.io/MariaIo/pen/yZmOWx)

Please give me feedback.

P.S. And I tried to make insert of a CodePen to FreeCodeCamp as here [Please Review - Tribute to Most Bad-ass Woman Ever](http://forum.freecodecamp.org/t/please-review-tribute-to-most-bad-ass-woman-ever/260846) … Do you know how to do it?

---

<div class="post-metadata">

**Author:** ![Gunjan](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/gunjan/32/88027_2.png) [@Gunjan](https://forum.freecodecamp.org/u/Gunjan)\
**Post date:** [February 26, 2019, 6:17pm UTC](https://forum.freecodecamp.org/t/technical-documentation-page-flex-feedback/261408/2 "2019-02-26T18:17:32Z")

</div>

awesome work man keeping coding

---

<div class="post-metadata">

**Author:** ![fbclh](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/fbclh/32/115091_2.png) [@fbclh](https://forum.freecodecamp.org/u/fbclh)\
**Post date:** [February 26, 2019, 10:24pm UTC](https://forum.freecodecamp.org/t/technical-documentation-page-flex-feedback/261408/3 "2019-02-26T22:24:14Z")

</div>

It looks goods, but it not responsive!

---

<div class="post-metadata">

**Author:** ![maria\_coding](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/maria_coding/32/109941_2.png) [@maria\_coding](https://forum.freecodecamp.org/u/maria_coding)\
**Post date:** [February 27, 2019, 1:37am UTC](https://forum.freecodecamp.org/t/technical-documentation-page-flex-feedback/261408/4 "2019-02-27T01:37:42Z")

</div>

Hi, [silverKnight](http://forum.freecodecamp.org/u/silverKnight)!  
I don’t understand. Please explain.

---

<div class="post-metadata">

**Author:** ![fbclh](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/fbclh/32/115091_2.png) [@fbclh](https://forum.freecodecamp.org/u/fbclh)\
**Post date:** [February 27, 2019, 1:54am UTC](https://forum.freecodecamp.org/t/technical-documentation-page-flex-feedback/261408/5 "2019-02-27T01:54:35Z")

</div>

I was trying to say that it is not responsive to small screens like mobiles. And it is good practice to make your projects responsive…

So you may want to experiment with media queries and make your projects accessible to mobile and tablets.

😉

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [February 27, 2019, 2:53am UTC](https://forum.freecodecamp.org/t/technical-documentation-page-flex-feedback/261408/6 "2019-02-27T02:53:57Z")

</div>

Stack it into a one-column layout with the nav at the top at smaller screen sizes.

Quick example, you should give it a try yourself first (remove the media query with the width for html, body as well).

> **Summary**
>
> ```auto
> @media (max-width: 800px) {
> 
> #navbar {
> width: 100%;
> height: 180px;
> text-align: center;
> overflow: auto;
> padding: 0;
> }
>   
> #navbar li {
> padding: 0;
> margin: 0;
> width: 100%;
> }
>   
> main {
> margin: 180px 0 0 0;
> }
>   
> #flex {
> background: none;
> text-align: center;
> }
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![maria\_coding](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/maria_coding/32/109941_2.png) [@maria\_coding](https://forum.freecodecamp.org/u/maria_coding)\
**Post date:** [February 27, 2019, 2:57am UTC](https://forum.freecodecamp.org/t/technical-documentation-page-flex-feedback/261408/7 "2019-02-27T02:57:11Z")

</div>

[silverKnight](http://forum.freecodecamp.org/u/silverKnight), responsive is really important. Thank you for your help.  
I worked on it in the site from beginning and tested in chrome mobile,

 ![24](https://global.discourse-cdn.com/freecodecamp/original/3X/1/b/1b31155f3b6dda9fe6daa39e73f55fb143e76d1e.png)

and opening Debug mode ([https://s.codepen.io/MariaIo/debug/yZmOWx/yYAyLOELXKVr](https://s.codepen.io/MariaIo/debug/yZmOWx/yYAyLOELXKVr)) on mobile. All was ok.

After your last comment I tried again and… then I opened usual view of CodePen on mobile and click to Full Page View than it become not responsive.  
Is it real problem with responsive or it’s just a some bug of a CodePen?

---

<div class="post-metadata">

**Author:** ![maria\_coding](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/maria_coding/32/109941_2.png) [@maria\_coding](https://forum.freecodecamp.org/u/maria_coding)\
**Post date:** [February 27, 2019, 3:08am UTC](https://forum.freecodecamp.org/t/technical-documentation-page-flex-feedback/261408/8 "2019-02-27T03:08:36Z")

</div>

[lasjorg](http://forum.freecodecamp.org/u/lasjorg), that is really great comment! Thank you.  
I will use it if I will loose all chances to save view as in the pic in the previous reply for all users.

---

<div class="post-metadata">

**Author:** ![fbclh](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/fbclh/32/115091_2.png) [@fbclh](https://forum.freecodecamp.org/u/fbclh)\
**Post date:** [February 27, 2019, 1:36pm UTC](https://forum.freecodecamp.org/t/technical-documentation-page-flex-feedback/261408/9 "2019-02-27T13:36:16Z")

</div>

I am not very familiar with CodePen so I can not tell, and even when I checked the project on Chrome DevTools it is not responsive. But @lasjorg already gave you some good clues on what you should do.

---

<div class="post-metadata">

**Author:** ![bmutebi](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bmutebi/32/100495_2.png) [@bmutebi](https://forum.freecodecamp.org/u/bmutebi)\
**Post date:** [February 27, 2019, 5:42pm UTC](https://forum.freecodecamp.org/t/technical-documentation-page-flex-feedback/261408/10 "2019-02-27T17:42:47Z")

</div>

Nice page… Though missing out on responsiveness

---

<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:25am UTC](https://forum.freecodecamp.org/t/technical-documentation-page-flex-feedback/261408/11 "2021-02-07T07:25:35Z")

</div>

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


