Responsive mobile deisgn issues

[gcalex5]

A few glaring issues exist with the responsive design on smaller and mobile screens.

• Stats table pushes out of the container on mobile
• 'home page' content pushes out of the container and is off center on mobile
• when the first break to 100% column width on the 'list of presidents/robots page' the president/robot picture looks bad left aligned, should be center aligned
• 'leader content' on the presidents/robots page should be center aligned to follow suit with the rest of the theme on mobile

[RobLoach]

Thanks for bringing these up, @gcalex5. Ensuring mobile accessibility across all sites is important. Your tests are a great starting point, and give a great outline of what actions to take.

How do you see these being fixed? What tools would you put in place? Where would the benefits be seen most? What would be the best way to QA it?

[gcalex5]

The code I submitted in my recent pull request would cover fixing these.

Wouldn't need any new tools in place to fix these, seeing as how a lot of these problems seemed to be relatively small fixes. As far as QA'ing these issues, I don't have much experience in that respect so I used Chrome's built in dev tools to check how it looked on various screen sizes as well as my phone and tablet to ensure that it hadn't broken anything.

[RobLoach]

Anything else you see in terms of mobile responsive fixes?

[gcalex5]

Yeah, taking another pass across the site, a few things stood out to me, particularly on the 'Scores' page.

• On the 'Scores' page at the 767px break point the score bubbles/text should really be scaled down to a more reasonable size. The problem resolves itself around the ~350-400px mark but everything in between looks crappy.
• Also on the scores page around the 430px mark the H2 text 'Presidents' and 'Robots' needs scaled down to better handle smaller displays. At 409px the layout breaks and gives a horizontal scrollbar.
• On all display sizes, not sure if intentional or not it looks like the footer doesn't sit at the bottom and has a 1px strip of white sitting below the copyright.
• A personal design decision I would've made on the 'Stats Table' would've been to drop the 'Known as' column once we are below the 400-430px mark, also capitalize 'as'. Also on the topic of that table it would've made sense to me to have the Contender name link to their personal page.