search

DevProgress / debate-bingo

Bingo game for presidential & vice presidential debates
MIT License
9 stars 7 forks source link

UI defect: ideally, entire bingo card should be in view at smallest breakpoint, while having legible font size #53

Closed sharkswithbraces closed 8 years ago

sharkswithbraces commented 8 years ago

Bingo card is cut off at 320/lower end of smallest break point. The user has to pinch/zoom or swipe to see end of card. Additionally, it's causing weird problems with the white header above it as it is not as wide as the card.

I played around with the css and this appeared to help the design at 320-767 (please don't judge me if this is incorrect way of doing this--this is my first time doing responsive/css :D)-

@media (min-width: 320px) .bingoTile, .free-square { max-width: 18vw; font-size: .875em; word-wrap: break-word; }

The downside of this is that words will break into multiple lines at the lower end of the break point, but that's the trade off for having legible font and the card in a single view. : )

Preview of work using inspector:

screen shot 2016-09-24 at 2 05 15 pm
sharkswithbraces commented 8 years ago

Decreased font so breaking doesn't happen as much as in screenshot.

Most breaking happens on a smaller phone (320-width), but not very often. I have logged an issue recommending we clean up our word list.