Tribute Page: Bender B. Rodriguez

Code Feedback
1

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 html and 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.

2 Likes
2

Nice. Looks really good!

The first thing that stands out to me is your “main text.” Those paragraphs are a little too long for comfortable reading.

I would suggest either breaking the paragraphs up into columns or adding a border (like your content above) along with some extra padding.

1 Like
3

Thanks, great suggestion! I completely agree that’s the weakest part of the page, and the only part that I wasn’t totally happy with. Hearing somebody else say it solidified it for me. I’ll definitely try to rework that at some point in the near future if I have time. Thanks for looking and responding!

4

np. I forgot to mention: Try making the font size of your “main text” smaller at your smallest breakpoint. 1em or 16px should be golden :+1:t5::

5

Good call. I just implemented that. Really makes it look better on mobile. You’re still totally right that it’s way too big of a wall of text, but at least it’s taking up less precious mobile real estate now. Thanks for another great suggestion!

6

Oh I love it! You spent some decent time on that. It feels like you really love doing this :slight_smile:

1 Like
7

Thanks, that’s so nice to hear!