I just finished up my tribute page. I wanted to make it fully responsive to get a taste of responsive design, and I learned a lot about flexbox, CSS media queries, and the viewport as a result.
I got it looking exactly how I wanted in both desktop and on all the mobile emulators in Chrome DevTools, and I thought I was good to go. Then I opened it on my actual iPhone 6 and it was not displaying correctly at all. I spent way more time than I want to admit tearing my hair out and trying to figure out why. And of course, when I finally stumbled on the answer, it ended up being something so stupidly simple that I couldn’t help but laugh at myself. But hey, I refined my debugging techniques some, I learned a new factoid, and I got to experience that glorious feeling when you finally figure out the solution to a problem you’ve been obsessing over.
For anyone who’s interested, the factoid I learned that ended up fixing my issue is that certain mobile browsers, when they parse the
<meta name="viewport"> tag, will then end up ignoring
overflow: hidden; on the
body tags for some reason. So better to put your content in a wrapper div and apply
overflow: hidden; to that instead. For me, the solution was as simple as removing
overflow-x: hidden; from the body and putting
overflow: hidden; on one of my container divs instead.
Anyway…criticism, compliments, and insults welcomed.