Quote Generator (Bojack Edition)

Code Feedback
1

So this is the first frond-end page where I actually like the appearance.

That said, I would like to further improve it. It is definitely not optimized for narrow screens and I would appreciate specific suggestions (i.e., specific dimensions / flexbox / bootstrap entries). ( Other suggestions also welcome.)

Also, if anyone likes Bojack and can tolerate data entry, there is a forkable JSON on Git we can edit.

2

My wife is a huge Bo-Jack fan (she’s constantly calling me a “Zelda” for some reason?) so I had to take a look at your project.

  • First thing that jumps out is that I can barely read the quote and I definitely cannot read the button text. The font you are using is very thin and thus the small button text is not working. For the non-button text I would turn the weight up to at least 700. For the button text, you are going to have to use a different font or make those buttons much bigger.
  • You need to make this more responsive. If I narrow my browser as far as it will go I get a horizontal scroll bar. For a page this simple I should never get a horizontal scroll bar.
  • Using Firefox, go to the ‘View -> Zoom’ menu and activate ‘Zoom Text Only’. Then while holding down the Ctrl key scroll your middle mouse button to increase the text size. Look what happens to the button text. You need to set height/width on these in ‘em’ units so they properly expand as the text size increases.
  • Also notice as the text size increases the quote box width stays the same so fewer words can fit on each line. Again, use ‘em’ for this width. But definitely set a max-width on it so it doesn’t get out of hand.
  • If you fix the responsiveness by adding a media query, make sure to use ‘em’ units for the break point so that it not only takes into account the browser width but also the font size. When you find a good break point, measure it in pixels and then divide by 16 for the equivalent ‘em’ unit. For example, if you pick 600px for the break point then the media query would be
@media screen and (min-width: 37.5em) {
  ...
}
3

Thank you, particularly for the part re: text sizing versus button / element sizing, I hadn’t thought about that before.