Removing Horizontal "Wiggle" From Iphone - Tribute Page


I am working on the first project. One thing I noticed is that on their example tribute page I cannot pull the page back and forth horizontally on my iphone. On mine I can (revealing a white background behind my page).

I added red borders to everything and the black background is the last one that had red around it. This was to check if any elements were wider than the page.

I also added:

html, body {
    max-width: 100%;
    overflow-x: hidden;

to the css with no success.

Code may be a bit sloppy because it is my first.

Thanks for any feedback/help!


I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

It could be that there’s an element with a margin that exceeds 312px, so the border could be the right size and the element still be too big. Also, click on the gear icon next to HTML in your editor to bring up the pen settings modal. At the bottom of the modal, you’ll see a button that says, “Add the most common viewport metatag”. Click that and save your pen.

1 Like