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
Hi! you could add this to the HTML header in the page you want to stop scrolling
<body scroll="no">
1 Like
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.
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.
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
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. 
1 Like