Trying to clone site and there is a responsive behaviour I can't replicate

Hi, Bubble community! I’m very new to Bubble and I’m attempting my first solo clone to test what I’ve learned so far.

I’m trying to clone this simple pomodoro timer and I can’t figure out how to replicate how the “app” portion of the page always takes up all the space above the fold while snaping the text content neatly underneath for scrolling, regardless of screen size.

I’ve played with conditional hide/show of element(group) containing text portion of page on both the element itself and in a workflow, a floating group and a reusable element. No luck yet.

Thanks in advance for your help!

Don’t think you can do this natively with Bubble’s responsive engine since they do not have a device view height setting (unless I’m mistaken). It’s an easy CSS fix though. Create a group with no max height and give it an HTML ID of “fullheight.” Then add this code to your page header:

#fullheight{ height: 100vh !important }

This should set the height of the group to “100vh” which means 100% of the “view height” of the device. Let me know if this works!

1 Like

One of the things I did try was this plugin Get Browser & Viewport Properties Plugin | Bubble but I couldn’t figure out how it worked. Sounds like it might get the info you mentioned. Are you familiar with it?

Otherwise, I’ll give this a try and let you know how it goes. Lot’s of new things for me to learn here :slight_smile: !

Thanks @NoCodePete

Hi again @NoCodePete! This didn’t work for me :frowning: Are there reasons you can think of why it’s not working even if I followed your instructions?

@PDR are you on a paid plan? need that for header code to work. you could use an HTML element instead.

otherwise, it’s a bit hard to say without seeing your editor. I offer coaching/consulting if you’re interested!

Hi again! Hope you don’t mind if I jump back in on this almost 2 weeks later.

So your guess was right @NoCodePete, I’m not on a paid plan. I don’t see in the plan details where this is listed. If I were to upgrade, would this work while testing in development or would I have to put my app in to production?