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.
btw, here the code for copy/paste
CSS code (paste in HTML element)
<style>
.fullHeight {
height: 100vh !important;
}
</style>
Classify commands (add to page and groups)
{addClass: "fullHeight"}
{removeClass: "fullHeight"}
That’s cool. Thank you.
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 
@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
<style>
.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.
Thanks
@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.
Hi,
I was looking forward to watching the video, but YouTube shows it’s been removed??
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">
