Forum Academy Marketplace Showcase Pricing Features

Vertical responsive tricks image do not work

I have a page that I want to design such that it looks good on all devices. Like an app.

Largest challenge is the height. Some large phones have almost twice the height in pixels available compared to older old phones.

To combat this I designed a system in which transparent images between horizontal groups shrink in height as the width of the page decreases. The rationale is that large phones not only have lots of height pixels but also lots of width pixels.

So, on large mobile phones there is space between the horizontal groups and that space (see it as a margin) is filled with a transparent picture, shrinks to zero when the width is decreasing.

All good. But, I had to insert a group on top of this all which is only visible in specific cases. And now, although this group is not visible, it still prevents the images to shrink to zero because technically Bubble still things the invisible group is there. Removing that group and everything works again.

Long story short, I tried several things but still no solution.

Any ideas how to use the height of large screens but also use that same content on smaller screens? Vertical responsiveness so to say that should depend on the viewport just like an app.