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

does @aestela solution work? otherwise please share some screen shots of your CSS etc. - it’s hard to guess the problem based on the screenshot only

Hi! Thanks for the answer!
No, it doesn’t work, maybe I’m doing something wrong. I need scrolling to be disabled only on large screens, and it will continue to work on small ones. At the moment, it looks like this for me.


Снимок экрана 2021-10-23 в 10.13.33

Try height: 100vh !important;

re the apply only to large screens: you can either use conditions like i do in the tutorial (i.e. use ID attribute based on screen height)

…or use media queries in your css code. These basically work like conditions in bubble, but directly in the css code. e.g. you could use

<style>

@media (min-height: 815px) {
   .dynamic-height {
    height: 100vh !important;
    } 
}
    
</style>

in that case all elements with the class dynamic-height would be full height if the screen has a height of min 815 px. for smaller screens, the height attribute would not be applied.

and then apply this class to the page itself (i.e. the index) using classify

some background infos Using media queries - CSS: Cascading Style Sheets | MDN and height - CSS: Cascading Style Sheets | MDN

1 Like

Спасибо большое за вашу помощь! Я сейчас попробую!: +1: : +1: : +1:

Building for mobile: Part 2

Since we don’t know what Bubble means when they say that their new responsive engine will be available to the public soon, let’s further optimize our Bubble apps for mobile screens. This tutorial includes vertically centering elements as well as mimicking Bubble’s floating group behavior for regular Bubble groups and elements:

Feel free to check out my editor setup and copy and paste the code to your project.

2 Likes

Hello, I want to do the same but in several groups and I can not, I hope and you can help me, thank you

happy to look into it. do you want to DM me some more details?

can you share some more details and screen shots of problem you are trying to solve? its hard to help you with the infos you provided.

grupos
I did the same procedure with a group and it worked (group_12_agenda your appointment)
but when I wanted to do with the other groups it was no longer possible



grupos
asi la configure para un solo grupo, segui sus pasos y ademas instale los plugins

with the right group

what i want to remove, blanks

the question is, how can I do it in my other groups?
I already tried but it doesn’t fit

Your video helped me a lot, thank you!
I hope it can help me

a few things you can try:

  • Remove the “?debug_mode=true” from the URL in the preview and reload
  • Make sure that the HTML element is not within a group but outside the group you are adding the class to (should not matter however unless its in a repeating group, but save is save)
  • make sure you have an HTML element with the CSS code on each page where you want to ad classes
  • use 100vh instead of 1506px

Can you share the full HTML code for the page?

i guess it has something to do with the order of the conditions, but really not sure. if you want to share the editor I’m happy to have a look (->DM)

Looks like the video is no longer available. :pensive:

updated version @enyarick: Updated: Optimise Bubble.io page heights for mobile screens - YouTube

1 Like