▼
Streaming live at 10am (PST)

Why is my footer button overflowing?

#1

Hi there,

I’m looking for some help please…

On Mobile views, I’ve added in a sticky footer button that appears once you start scrolling down the page here:

However it’s extending beyond the width of the viewport for some reason. I’ve played around with widths and overflow hidden etc but it’s still happening.

Any advice to fix would be much appreciated, thank you.

Graham

Here is my site Read-Only: https://preview.webflow.com/preview/click-mortgages-lp?utm_medium=preview_link&utm_source=designer&utm_content=click-mortgages-lp&preview=00503e725e6b99caba2e00d9c90bc898&pageId=5dc6e6a5d6571ee65abe1eb4&mode=preview
(how to share your site Read-Only link)

#2

Hey Graham! On my phone (iPhone XS) the button is sized right. There is a horizontal scroll that looks like it comes from the footer. If you try styling the footer for smaller screens (probably 1 column vs 3), I think you’ll lose that horizontal scroll. Hope that helps!

#3

Hi @parker

That was it! It didn’t occur to me it the footer could be affecting it! Thank you so much.

Could I ask one other thing. Now I’ve fixed the footer, the sticky button is appearing immediately whereas before it was appearing upon scroll. I’m not sure if that was due to where I had the sticky button listed in the navigation pane or a side effect of the footer issue? Is there any way to get it to appear upon scroll without setting up an interaction/animation?

Cheers, Graham

#4

Hmm, I don’t know why it was appearing on scroll before. I think the only way to do this is through an interaction, but it should be pretty easy to set it up. In fact, the amazing Webflow Education team has a 4 minute video that might help!

#5

Thanks @parker that’s great. I’ll check it out.