Technical Documentation feedback and question

Code Feedback
1

Hello,

This is my project I would like to share with you: https://codepen.io/liukangaroo/pen/wvKgZNM

I have no idea how to display navbar on top for mobile browsers (using media query) without mindlessly copy-pasting some googled code. Temporarily I’ve disabled it by display: none; just to pass the test.

Can somebody ELI5 how to do it? I must admit that I have some trouble understanding the concept of media query :frowning:

2

The way I would do it is using Flexbox. When the page is on a large screen, just have the default flex-direction. When the page is on a smaller screen, set the flex-direction for column.

3

Try adding back the CSS you did write so we can see what you have tried.

Without posting code.

  1. In the media query add a selector for the #navwrap element. Remove the float and give it 100% width to make it take up the full width of the page.

  2. Give it a height that is less than the content and set the overflow-x to auto. This will give you a scroll box for the links.

  3. Remove the negative top margin and use top: 0 instead (just a better way to do the positioning).

  4. Fix the CSS for the navbar element (height, and any different positioning you want, etc.).

  5. Look at some solutions for making the links land correctly on the sections again, as they will not do so after the changes to the nav.

#navwrap {
  float: none;
  width: 100%;
  height: 250px;
  top: 0;
  margin-top: 0;
  overflow-x: auto;
}
4

Hi @labla1, something to revisit;

  • Don’t use <br> to force line breaks. Nest multi-line <code> snippets in <pre> </pre> tags in HTML to preserve whitespace and line breaks. Or you could do
code { 
  white-space: pre; 
}

in CSS and skip the <pre> tag in HTML.

5

Hi, I haven’t had much time lately to work on it but from what I see your advice is brilliant. I’ll post final version when it’s done.

@Roma thanks, I didn’t know that tag existed :smiley: Maybe you should add one lesson mentioning it to the curriculum? Seems pretty neat to avoid so much repetition I did.

6

Here is the final version: https://codepen.io/liukangaroo/pen/wvKdpLw

Everything works as intended.

Made nav scroll hidden when @media starts to work just for a better look :wink:

Thanks again, you guys are great!

7

Good job.

I know the default scrollbar can be a bit ugly but without it, the user really doesn’t know that the area is scrollable. Remember the user may only see the page at the small screen size and not know anything about the page other then what they first see. So from a UX perspective, it really isn’t a good idea to hide it.

You can look into customizing it although cross-browser support isn’t great.

Oh and here is the link to your current page, the link you posted is dead.
https://codepen.io/liukangaroo/pen/wvKgZNM