How do I make an element stretch vertically to fit any users phone screen? Everything stretches horizontally just fine, why is it so difficult to do it vertically? It seems like it should be a simple integration into bubble… I’ve been on the forum for hours and I don’t understand any of the attempted solutions. Is there a simple way to do this, or at least a way that can be explained to someone who is new to this?
The entire responsive engine seems to be based around width, why not height?
Hello @nathanjameshutchinso,
One technique to manage vertical spacing is to stack container groups vertically in the editor. All of these need to be hidden by default, set to collapse when hidden by default, and shown conditionally one at a time. Make them transparent so that short ones can blend with the page’s background color.
Set your header and footer to be floaters touching physically the top and bottom of your pages top and bottom respectively … and to float relative to the top and bottom respectively.
Do not worry if you have a one pager with many container groups stacked vertically making it super tall in the editor (thousand of pixels high no problem). Bubble can take it. When previewing, things will work out fine.
Hope this helps! 
Thank you for your response, I’m trying this right now. But one thing I don’t get yet is this:
“… and shown conditionally one at a time”
Can you elaborate? There seems to be only a conditional event for page width, but nothing for page height. What condition am I supposed to be checking for?
The condition would be to make the entire group visible when that group is chosen by a navigation menu or some UI element that you want to use to make the different container groups visible one at a time (replicating a page view type function)
I’m not sure I understand. I need the groups to become visible depending on the users viewport height. So, my app is just a single page with groups that change depending on what you click. Here is an example of one of the views
So, I need this page to stretch or shrink based on viewport size. With the method you are recommending, I figure I need to put invisible groups between the header and the body, and have them either SHOW when viewport height is X (taller) in order to stretch to fit, or have them HIDE when viewport height is X (shorter) in order to shrink to fit.
I’m not sure if I can make this work with a condition that requires user action, as you mentioned.
Do I understand correctly?
Thank you for the illustration. This makes sense. So I put some of these groups in between my elements.
I make my page quite big, to fit the tallest phone, and put some vertical space in between each element.
Then, when the phone viewport is shorter, I need to set an event that collapses the groups so the vertical space between the elements is removed and the page gets shorter to fit the viewport.
Is this correct? If so, then I am just now wondering what condition to use to collapse the groups when the phone’s viewport is smaller in height?
If I don’t have this condition, then the app will just always collapse the groups that are hidden, giving it a default size of the smallest in height.
It seems I need a setting where the groups are visible at certain heights, and invisible at other heights, in order for this method to work.
A mobile viewport is so short in height that I would not worry about it. My content fills pretty much the viewport in many cases. And in those that it does not, it does not look bad at all. The floating header is almost always there, as well as, the floating footer.
But … that is just me 
Hey sorry if I’m pestering, I do appreciate you helping me out really, but I guess I just don’t see how this does anything. If the invisible groups collapse then the height is fixed at everything minus the groups. If the groups don’t collapse, then the height is fixed at everything plus the groups. If I make one group collapse, then the height is fixed at everything minus 1 group. I don’t see how this is a solution, I might as well just set a fixed height. There needs to be a condition which decides when the groups collapse in order to make the height responsive, still don’t know what this condition is.
You said:
“The condition would be to make the entire group visible when that group is chosen by a navigation menu or some UI element that you want to use to make the different container groups visible one at a time (replicating a page view type function)”
But this doesn’t make the height responsive, it makes the user able to resize the height by clicking a UI.
I must be missing something, but I can’t see it 
I use Classify plugin to handle stretch issues like this.
This technique ensures that only the group that you want is visible. Nothing below to interfere with height bc every other one is not visible thus collapsed when hidden.
If these container groups are transparent, the end effect is to show your inside elements of the conditionally-made-visible container as pure content on top of the page ‘s background (whatever color it is).
Create a test page, build the technique and see how it works. Perhaps you are trying to fix a big page that you have worked on for months?
Hey there,
That is what I thought, but I am struggling to get this to work. Any suggestions or help?
@ben4 You’re struggling to get Classify to work?
Yeah lol.
@ben4 Did you read the original post and try to follow that? Where did you get stuck?
Here’s my quick and dirty version:
Thank you @Zaque,
I am not sure where you original post is? but the quick and dirty version didn’t provide any result.
Benjamin
Does it change anything if I am using Air Calendar?
Share some screenshots if you’re still struggling after reading the original and I’ll take a look.
One other thing you can do to troubleshoot is inspect the elements using developer tools. That will tell you if the CSS style is actually being sent. It may actually be sent to your page, but the CSS behavior isn’t what you’re expecting (e.g. because you’re applying it to the wrong element).
This is the original post: 🔥 Classify: A tiny plugin that brings CSS power to Bubble
Yay, thank you for making this amazing plugin, @julienallard1
I’m not super familiar with Air Calendar, but it could be what I allude to above (e.g. CSS is being sent to the element, but it’s not looking the way you want it to because other factors are influencing it).
@Zaque I really do appreciate the help, but I am just not going to get anywhere with this. When it comes to css, javascript, or any other type of code, I end up making no progress and only getting frustrated. One time I was putting together a very simple plugin and it took two weeks, with help! ahah. Thank you though!
