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
Champion work! Thank you for the lead in to the Responsive Viewer Chrome extension as well!!!
Hi @d9999 I tried your method but it is still not 100vh in the preview mode sadly. I only have one empty group in the whole page to test this out and would like it to be 100% viewport height, but when I tried to shrink the page the scroll bar appeared again. Do you know how to avoid the scrolling and make sure the group is 100vh in all cases? Thanks a lot!
Did u remove the debugger? Just to be sure
I have this working responsively, and it’s awesome! So thank you @d9999!
The issue i’m facing now is that if I drag the browser window from my laptop screen to my larger desktop screen, a large white portion appears at the btm of my page as well as a scroll bar.
Any ideas here? Is there a way to detect when the browser moves to a different screen size or something?