Help---random quote machine---help

Hi, i was working on the random quote machine challenge [link: https://codepen.io/tushar_/pen/BwvxVK]and it’s almost complete but i am facing a small issue. In mobile view, when the quote is long, the footer overlaps the content box. I’ve attached a sceenshot please give it a look.


Tried giving margin-top padding but nothing seems to work. Please help me with this.
Thank you.

1 Like

I also want to know some ways to deal with this. I’ll usually set margins, padding, or create media queries to change the font size, but that always feels hacky to me.

This is happening because your footer is set to position: absolute; This means it doesnt respond to other elements getting in the way. Its staying in that spot no matter what margins you add to the quote container.
hint the absolute part.

As for the fix. Take a look at this codepen.
This is a “Always on the bottom” Fotter that isnt set to position: absolute; so if content pushes against it, the footer will move with the content.