(Mobile) Setting height to fill screen and use floating groups

[bas1]

Hi Everyone,

I am messing around with a mobile page but am having a hard time with the white space at the end of my content.

While googling it I found this topic: Dynamically adjust Bubble page heights for mobile screens - make your apps look good on mobile screens - #24 by d9999.

Pretty decent solution, but the writer does not use floating groups. I have two floating groups, one on the top and on the bottom, which I believe are interfering with this solution.

Does anyone here know how I can setup a responsive mobile page that stretches a group to the max height of the screen? I want a floating top group menu, a floating bottom group menu and repeating group in the middle.

Thanks,

[rossliddell]

The new responsive engine should handle this for you.

[d9999]

agree, should not be an issue to do with the new responsive engine. Also, generally, the floating groups should not interfere with the height of your normal group, they just float above. the issue might be that your group uses the full screen, but the part behind the floating groups is not visible? you could mitigate this by adding empty spacer groups in your group at the top and bottom, haveing the same heights as your floating groups. this makes sure that no content ends up behind the floating groups. if that does not work, here and idea: you could first calculate the available height between the floating group and apply this to your group instead of 100vh. So the element has the height of the screen minus the heights of the 2 floating groups. Then add a margin on top and bottom of your group. you can have a look at how the calculation can be done here: Building for mobile: Part 2 | Revue - applied to a different problem, but should work in the same fashion

[djtochner]

As mentioned above, the new responsive engine will fix that issue, but if you still need a solution for the original responsive engine you can check this Youtube link that will help you with your struggle