This is the footer I designed to improve the user experience on mobile devices.
I want the footer to stay at the bottom of the screen while scrolling the page. I tried setting the Scroll Effect to both Fixed and Sticky. And whether previewing in the editor or testing on the live site with PC, it works how I want. But when I test the live site with a mobile device, it doesn’t follow the scroll synchronously, but with a delay. This causes this bar to appear broken and disturbing in terms of user experience.
While it works correctly on a PC, but works differently on mobile devices, which made me think it might be a bug of Editor X. Or I don’t know, am I doing something wrong?
Or is this bug related to the Editor X ad banner, idk. I don’t have a Premium membership for now, I’ll buy after I complete the design of the site.
With this link, you can test the live site with a mobile device. Current scroll effect is “Fixed” for the footer.
You should use it as a FOOTER. I would copy your existing footer, then allow the copy to appear only on mobile layout, while hiding the default one there. Then make that footer fixed.
I really don’t know what else could be wrong. It’s interesting that it works fine on PC but not on mobile. Anyway thanks a lot for your answer I will keep trying and recreate it, on different sites etc. But I hope there is a solution for this and I’ll be grateful if someone who knows can help.
You’re most probably encountering this issue due to the Chrome navigation tab that scrolls up when the user scrolls down. However you can try these steps to prevent the issue from happening:
Use a Container instead of a Section as your footer.
I have a site with a navigation tab at the bottom, just like yours - and this method works just fine.
Add a container. Set its height as same as your existing footer.
From the Inspector Panel at the right, dock the container to the right, left and bottom and set all the margins to 0.
Copy - paste everything from your existing footer to the container.
Under Scroll , set the Scroll Effect to Fixed.
And that’s it. Let me know if that solves your problem.
I encountered a bug while doing what you say, so first I thought your answer didn’t solve the problem. I set the container as fixed and it is aligned to the bottom of the screen. Then I published and entered the mobile site, but it was still moving wrong as before.
Then I checked the container again in the editor, the scroll effect showed as none, even though the container was aligned to the bottom. The second time I set it to fixed. And now it works good. Thanks so much again
I will keep trying and recreate it, on different sites etc. But I hope there is a solution for this and I’ll be grateful if someone who knows can help.
