Technical Documentation Page content sliding under navbar

#1

I’m currently working on my technical documentation page project, and I decided not to use CSS grid, as it is not used in the reference Codepen project. I would really like to achieve the results in the reference using the same set of means.

My page looks fine when I open it, but when I click on one of the nav links in Chrome, the main content slides under the navbar, as if the margin-left were disappearing. When I test the same code in Firefox, I do not get this issue.

Also, the content of the main section seems to be too wide, and I keep getting a horizontal scroll bar at the bottom of the page, both in Chrome and in Firefox.

I have checked the reference page similarly, and these issue does not occur there. I have studied the CSS there back and forth, and I can’t figure out what part I am doing differently that ends up causing this issue. I would appreciate any tips and ideas for what to look into.

Here’s a screenshot of what I see in Chrome, and a link to my Codepen.

image
image1920×1080 288 KB
(Chrome screenshot)

All the best and thanks in advance, Fox.

P.S.: Some of the text and design aren’t quite finished that, so never mind those for now, if possible, just the too wide content issue.

#2

It works fine for me in chrome, firefox and safari, but I’m using a mac.

#3

Thank you for your feedback, it’s valuable to know. I’m on Windows myself.

That’s just so peculiar. =)

#4

Hey, thanks again! I think I have fixed it.

Seems that the problem was the following: in one of my snippets I had an iframe code that I copied and pasted from YouTube. And although according to the css rule for the code element the text was supposed to wrap, actually in this particular case that wasn’t happening (I have yet to figure out why, but that’s another issue).

When I manually broke the line in my html, and restrained the #main-doc max-width to 70%, the width issue disappeared.

image
image1435×301 19.5 KB

It doesn’t look good yet, but now I know where the problem was, so I can solve it.

I think, maybe the reason this happened in some browsers, but not others, is because they are programmed to treat excessive line width differently.

Anyways, thanks for the support, I’m so happy to be moving on with this =)
#5

An even easier way of solving this issue turned out to be setting the white-space property of the code element to pre-wrap.

image
image1696×211 14.8 KB

#6

Glad you found the problem, wish I could’ve helped you more.

#7

I think the simple fact of asking the question out loud and getting any sort of response made me feel sane again (I was starting to really feel overwhelmed because I just couldn’t grasp what could be wrong, with all the code seemingly similar), and your answer also made me realize that it must be some browser-specific little thing, and then that just gave me the strength to think straight again. So actually, you helped a lot. =)

1 Like
#8