How to Lock Height on Mobile Devices (No Scroll)?

Need help
1

Hi everyone,
I’m trying to figure out how to lock the height of certain pages—like my login page—on mobile so that there’s no scroll if there are no elements extending beyond the viewport.

For some reason, I’m seeing a small vertical scroll (about 20px), even though there’s nothing visually below the fold. I’ve double-checked that no elements are extending past the bottom, so I’m not sure what’s causing it. This is happening on other pages as well so it’s becoming an annoying experience.

Is there a way to force the page to take up the full height of the screen and prevent scrolling when there’s no content below?

Thanks in advance for your help!

2

I know three ways to solve this

  • you can make a minimum height of 80%
    and dont fit height to content
    so it will fill the rest that needs it

  • there are plugins that lock the scroll action, you choose when this happens (buttons, conditionals or even just loading the page) which I believe would be the best for you

  • and also the video where a guy teaches you how to make it 100% height according to the height of the user’s screen and not the height of your default screen in bubble

this must be the best because there is no loss

video link:

I hope I helped

3

Hey @brookelustig :waving_hand:

Best thing to do is to actually check the element and the page to see that you don’t have something that is preventing the page from collapsing the whole way.

Some things to check.

  1. Your page element, is there a minimum width that you can remove?
  2. Are there hidden elements or plugins that are causing the issue?
  3. What about collapse when hidden, check to make sure those are checked if need be.

Does that help? :blush: Those are the first things I would check.

4

Thanks for the tips everyone! Was some old code in the header causing the issue.
min-height: calc(100vh) !important;
}
.main-page.bubble-element.Page {
min-height: calc(100vh) !important;
})