Why is this not mobile responsive?

Hey guys! right now I am attempting to finish my technical documentation page and for some reason my page is not working on my phone. When I’m on my computer and I make the page smaller than 400px width the p and section elements are responsive and stay on the page. However, when I bring it up on my phone the same elements overflow to the right so you have to scroll to the side to see it. I have not had this problem with the other assignments can anybody tell me whats wrong here?

Thanks in advance!

Here are the links for the page (the navbar may not finished when your viewing this).
code view: https://codepen.io/jakethecoder95/pen/rraPGa?editors=1100
full page view: https://codepen.io/jakethecoder95/full/rraPGa/

SOLUTION:

So the only way I could get this to work was adding this code:

@media (max-width: 375px) {
  body {
    zoom: 80%
  }
}

It seems like the body just didn’t want to shrink less than 375px so I just made it zoom out when it reached that width. Eh… it worked but I still don’t know what was making it do that. Please let me know if you have heard of this problem and if there is a better solution.

Thanks for the responses so far and happy coding everybody!

just a suggestion: try putting borders around everything in bright colors and tracking down which elements look like they’re pushing everything out of whack.

1 Like

Just add this in css:

.mvc-img{
  display: block;
  margin: 0 auto;
  max-width: 100vw;
}

as you forgot to define the class in css to make the img responsive that was causing the overflow on x axis.

2 Likes

Thanks for the feedback! I gave that a go. It seems to help on the computer but on the phone I still have to scroll to the side.

Thanks! That helps me see what the issue is a bit better.

1 Like