Technical Documentation Page Scrollbar Help on Mobile

Hey, nighthawks! Hope everyone is having a happy coding day or evening lol! :grinning:

I just made a mock up of the Technical Documentation Page. I didn’t do it with the testing script active yet. I just looked at the original project page in the example and tried to make it as similar to that as I could. Fully responsive as well. The mobile however is giving me trouble.

I am getting stuck on my mobile y axis scrollbars. Can someone take a look and let me know if there is a solution to this problem. I have my body scrollbar overflow-y:scroll on mobile and my #main-content .content-area .content-sections scrollbar is on as well. If I get rid of my overflow-y:scroll for my .content-sections than when you click a nav link the content sections get pushed up hidden under the navigation. Thoughts?

Here’s the links:

Original Technical Documentation Landing Page Example: https://codepen.io/freeCodeCamp/full/NdrKKL

My Mock Clone: https://hopeful-booth-2767ed.netlify.app/

My Codepen: https://codepen.io/dobs93/pen/OJyqbJR

The first picture is the look I am trying to achieve with just the body scrollbar and the second picture is my screen. If I get rid of the content scrollbar than the content gets pushed up under the nav.

Picture 1:
documentation2

Picture 2:
documentation

Woah, an alien! Lol! :joy: :laughing:

Hmmmm, I can’t see what part you seem to be talking about. I have no “header” on my code for this page. I don’t know about half the CSS not working. Seems to be okay for me. Care to elaborate?

EDIT: If you clicked the first link that is Free Code Camp’s example page. My site is the second and third link. It will look similar because its meant to be that way.

That’s the Free Code Camp’s example page. My site is the second and third link. It will look similar because its meant to be that way. You are looking at the code from FCC example site.

Also in that instance that you posted “header” is an HTML 5 semantic tag and therefore it wouldn’t need to start with a period like a class of class=“header” would.

You still haven’t fixed the mistakes though. I suggest you get onto it :3 rather then nitpicking. As this forum is meant for helping others only and not social fighting.
Fixing your code is what you made this thing for thats what it shall be for

You are not understanding what I am saying at all. The first site isn’t even my code. Maybe you are an alien after all lol.

Anyways, I am not trying to “nitpick” or “fight” I was just pointing out what you were looking at.

Anyways, thanks for taking a look! Have a great morning, afternoon, whatever time it is where you are.

All the best! :smiley:

Why are you calling me an idiot now? Just because I told you what a semantic tag was? Like you mentioned this forum is for helping others and I was simply trying to help you to understand what you were looking at.

Add overflow-x: hidden;
It helps

Why are you in the console showing error messages.

I’m nearly positive the console in dev tools is mainly only used for Javascript and the 2 main uses being viewing logged messages and running Javascript. Those error messages you are circling in red are from it being run on CodePen I’m pretty sure and don’t have anything to do with the actual code. When you open it outside of Codepen you see the usual “failed to load sourcemap errors” in the console and that’s it. There’s no Javascript on this page. Hey, at least you didn’t label this picture “idiot site” lol.

This is a much better resource for markup errors I believe : https://validator.w3.org/

You do know overflow-x is for the x-axis right? Meaning left to right. Not up and down. This site already has no horizontal scrollbar at all.

overflow-x: hidden;

in this particular case would do nothing to change the site.

So I do appreciate the reply but for this website it’s not going to fix the problem of the scrollbar on that content-section hiding items of that area when a nav link is clicked.