How to have responsive heights?

Need help Responsiveness
1

Hi All,

I’m stuck with trying to have a responsive height for a mobile app.

Given mobiles have different screen heights, I want the pink area in mockup to grow or shrink, based upon the mobile’s screen size. This would help ensure the two light grey groups stay where they are.

I’ve tried using FLoating groups for the grey boxes, but that didn’t seem to work as they interfered with the top and bottom toolbars (which are themselves floating toolbars)

Any ideas?

Thanks

Screenshot 2021-01-07 at 10.21.50
Screenshot 2021-01-07 at 10.21.50593×860 7.5 KB

2

Hi Bubblers, anyone got a suggestion?

Thanks

3

I’m facing similar problems with elements height no being as responsive as its widths.
Looks like there is no responsiveness to heights, and the architecture of how it displays in the frontend makes it hard to target the element via CSS.

4

Indeed, height responsiveness for heights is not straightforward. I’ve been teaching myself on Bubble’s responsiveness and I’ve capture some of those learnings on this post (link).

Ideas:

  1. Look at the work of Gregory John (first couple of links in my post).

  2. Step back. Is there a simpler way to achieve ~80% what you’re trying to achieve?
    I’m of a stubborn constitution and I’ve tried making Bubble do things that are not native to it. I invested a ton of time, looked at the result, then realized I could have saved myself a couple of days by just “coloring between the lines” instead of outside of it.

  3. An impractical way to go about it (aka how I lose days of my life):

    • get a plugin that reads viewport height.
    • create a bunch of scenarios for different screen sizes.
    • hide/show repeating groups based on the viewport height.
1 Like