Technical Doc.Page - Content Moving around (mobile)


I am having trouble with content moving around when using the media queries.

I would like the content to stay still also in mobile format, as in full screen mode on a larger screens.

Another issue I’m having is aligning the main content ( main-doc ) in mobile format.
As you can see I added a media querie ( all media queries are at the bottom of the editor! ) to a negative margin but it doesn’t do anything.

Here’s my pen:

Please could someone help?!

What exactly do you mean? Do you have an example of what is not staying still?

Regarding your media queries, you do not using the correct syntax. You are missing some closing brackets. Also, you can not just change the margin-left property. You must also change the position from absolute to static. Also, think about which media query where you should be changing #main-doc. Currently, you are only attempting to change when the screen is 400px or less.

I logged into codepen via my iphone and when I look at it from there,
the nav bar and the main doc is moving around inside of the container
when I swipe on the screen.
Slightly to the left but mostly to the right ( more space on the right side of the page for some reason) .

I hope my explanation made sense.

I don’t have an iphone to test.

What does it look like from your own phone?

Which margin left are you reffering to? And I can’t see which closing bracket I’m missing.
Why must I change it from absolute to static? I tried that on main-doc but that doesn’t work out
too well :).