Random Quote Generator - Some of the text is lost in mobile view if the quote is long . Please help!

Random Quote Generator - Some of the text is lost in mobile view if the quote is long . Please help!
0.0 0

#1

I have been building the Random Quote Generator and have added all the functionality . Only problem is when I resize it to a small device view, some of the text from the top gets lost if the quote is long. I can’t seem to get around it . Please help me with it !
Here is the codepen.io link - https://codepen.io/kshitij1234/pen/RVJYwG


#2

Haiiiiyo.

The (major) reason is because you have applied absolute position to .quote-container and offset the container with transform: translate(-50%, -50%).

If having a scroll bar for longer quotes is not an issue then the simplest “fix” is to make .quote-container a flexbox, and justify and align the items accordingly with flex-display set to column. You will have to set the %width of .quote-text to get the original layout, too.

I hope that helps. :slight_smile:


#3

Thanks a lot!!! It worked!!