Let us discuss my Random Quote Machine

Project Feedback
#1

You can see it here:

I mainly focused on 2 things:

  1. To make it look as simple as possible and
  2. To not have to move the mouse to get a new random quote. That added some more difficulties as I
    had to pay closer attention to the formatting of the quote. At this point though I feel it is ready for some external feedback :slight_smile:

Current bugs:

When the quotes are too long, the author disappears and the font size gets too small

#2

Whoops, in the browser-integrated codepen-window it looks way different (and pretty bad lol), I’ll see how I can fix it.

Here’s the full link:

https[colon]//codepen[dot]io/barnabasedubio/full/VzGxEO

#3

On mobile or smaller screens, I am getting this kind of problem. It is cutting off the quote and mixing with the author.

image
image376Ă—582 16.6 KB

#4

Hey, thanks a lot for the feedback!

Since I’m adamant on keeping the “Next Quote” button in a fixed position, I had to rewrite the way the quotes are formatted again. It’d be great if you could check it out again, I think I fixed the issue but your input would be very helpful :slight_smile:

#5

If you are still using the same Codepen link you sent earlier, then you still have a problem on smaller screens (see below). In case you did not not know already, you can simply resize the window an make in narrower to see the same thing I am seeing.

image
image355Ă—537 14.5 KB

#6

Okay thanks, I tried it a few times with the smaller screen before, and the quotes seems to be fitting in the box fine, but I guess
If I reduce the screen size to a specific value the quotes will always pop out, unless I do something like changing the overflow behavior.

A possible solution I am thinking of is simply setting a min-width of the browser window. It might not look that great for smaller phones, but that way I can ensure the quotes staying in the box. What do you think?

#7

I can suggest a couple of different solutions:

  1. Using JS, change the font-size depending on quote length. You will have to play around with many quotes to dial in the various font sizes needed.

  2. Don’t display quotes greater than a specific length. If quote length is too long to fit your quote window, then call the quote api again for a new quote.

#8

Okay, thanks a lot! :slight_smile:

#9