Forum Academy Marketplace Showcase Pricing Features

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.

image

21 Likes

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)
<style>
.fullHeight {
height: 100vh !important;
}
</style>

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

3 Likes

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
<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

2 Likes

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??

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