Dynamically adjust Bubble page heights for mobile screens - make your apps look good on mobile screens

It seems like a lot of Bubble users are struggling with optimizing their Bubble apps for mobile screens. So, I made a short tutorial on how to manage element heights and page heights in Bubble to look really good on mobile screens. Hope this is useful.



Awesome video @d9999

This will certainly help many folks here … Me being one of them!

Thanks! :grinning:

1 Like

btw, here the code for copy/paste

CSS code (paste in HTML element)
.fullHeight {
height: 100vh !important;

Classify commands (add to page and groups)
{addClass: "fullHeight"}
{removeClass: "fullHeight"}


That’s cool. Thank you.

1 Like

hey folks
let me know if there are other mobile-related issues you are struggling with. happy to make more tutorials if there are some issues many people struggle with :slight_smile:

1 Like

@d9999 great video!! Thanks a lot for sharing!

Just a question, could this approach be used for manipulating horizontal size to expand/compress content? I’ve been trying to make a collapsible side menu (eg. Gmail side menu) but there’s is no way to replicate this in an “accordion” fashion.

sure, you could sure use something like
.myWidth {
width: 20vw !important;
(vw → viewport width. or simply use px or % eg. 50px or 20% or what ever fits your design)

but it’s probably not the simplest / best way to solve your problem. I would rather use some floating group and then animations to show and hide it…

My friend, I have this problem in my application.

But the video link shows the message that the video has been removed.

Changed the link? could you share? It will help me a lot.


@murilonsr oh yes i uploaded an updated version and forgot to link it here. See bubbleHacks #1: Optimising for mobile screens - by Damian - bubbleHacks Newsletter and https://youtu.be/Pf2WhkIuLc4


How did you make the underlying RG stretch … or pin the bottom nav bar to the … bottom?

The bottom nav is a floating group. It floats above the other elements in a fixed position. Containers - Bubble Docs
The RG is simply set to show all entries

Ah gotcha. Thanks.


I was looking forward to watching the video, but YouTube shows it’s been removed??

New link here bubbleHacks #1: Optimising for mobile screens - by Damian - bubbleHacks Newsletter

Thank you!!

Very cool this. I managed to apply the feature to groups, but when I tried to apply the same logic to a repeater group it didn’t work. Can you tell me why?

I am very grateful for your help.

Thank you very much.

Try to add the class to a group in the RG cell

Hi! Thanks for this video. I have a slightly different situation, can you help me?

There are a lot of elements on my pages and I can’t hide them. I want to keep scrolling the screen width to a height of less than 800 pixels (iphone 8 and below), but disable scrolling for screens larger than this value, since everything is decreasing well there, I did for iphone x.
How do I do this?
I think I need a command to disable scrolling when the screen size exceeds 800 pixels

I set the screen height, but I still have a little scrolling. I want to turn it off

Hi! you could add this to the HTML header in the page you want to stop scrolling
<body scroll="no">

1 Like