Please help with my overflowing div

Please help with my overflowing div
0.0 0

#1

Hi everyone,
I finished my Random quote Machine, but I have a problem making it responsive.
Here’s my code:


And here’s the live version:
https://virginiabalseiro.github.io/WiseMonkey/
On mobile, the container (the blue bubble) overflows out of the body and is cut off.
I know I have to fix the font size, but that alone won’t cut it.
I’d like the text to adjust to the size of the bubble too.
And I cannot use overflow because my :after element disappears (the triangle part of the bubble).
I’d very much appreciate any help!!
Thanks!


#2

Have you tried setting the .wrapper container to height: 100vh?

Or the body to height: 100vh


#3

Yes, it doesn’t work :frowning:


#4

Hey guys! I just spent most of the day creating the Random Quote bubble Machine project. Link I would appreciate it if I could get some feedback on it. Cheers!