Help with overflow and mobile responsines


I am working on my Technical Documentation page. When I open it on mobile content is moved to the left, if I put overflow:hidden on body I am unable to see my content on mobile and unable to scroll body, can anyone help please? I am unable to find cause.

Here is my pen:

Also any other comments are welcome :slight_smile:

Thank you in advance!


I can’t reproduce your bug about content moving to the left. You have have changed the code since then.

About your question related to overflow: hidden on body:

If you put overflow: hidden on any element that contains overflowing content (including its children) it will hide the overflowing content. And since body is basically the parent of all the elements in your HTML, it will stop the scrolling on your page.

Can you explain a bit more what you were trying to achieve by setting overflow: hidden?

Yes I have changed code. Also I found I have padding on one of my elements which was causing that page is shifted to the right and not overflow as I originally thought.

I had this problem on my other pen where I had to use overflow because I had horizontal scroll in page, but I found explanation for overflowing and overflow-x: hidden; resolved my issue. ( this pen)