Floating group responsiveness help

Need help Responsiveness
1

Hi,
So I need some help achieving the below effect

I have my header bar which is centered on the screen but I want to have a floating group which floats relative to the left and top (red box):

image
image607Ă—573 2.06 KB

I want the floating group to stretch when the page is stretched but the problem is, it stretches at a different rate than the gap.
So this is what I want:

image
image1051Ă—823 7.01 KB

But this is what happens:

image
image887Ă—593 2.29 KB

Because the floating group stretches faster than the gap between the centered header and the right side of the page.

I understand that I can get the desired effect if I just create something like this:

image
image855Ă—534 2.18 KB

Where the green and blue boxes are invisible groups that are there purely for responsive purposes however I want to have a regular group (non floating) right where the green box is. This causes things to not be clickable as you have groups on top of groups.

I know you cannot specify a formula for the way in which a group should stretch, so I am hoping someone has a work around that doesn’t require me to create the green, blue and red box setup as I have detailed above (note: this is currently the setup that I have and I am trying to figure out how to get away from that as it causes the non clickability issues I touched on).

Thanks
Paul

2

So just a thought:

If you have in the above and below group the same setup, even if the top parts are invisible, usually you can get these weird spacing things perfectly matching.

So I’d make it like this:

[invis green copy][centered header][invis. red copy]
[green][blue][red]

3

Thanks for your response.

If I understand you correctly, this is the setup I currently have. The problem is that I want a second “[green]” group exactly where the first [green] group is located but it has to not float. This means that the second [green] group is blocked (not clickable) by the first [green] group.

If both were floating groups then I would just add in my clickable element to the [green][blue][red] functionality I currently have. But I need this element to not float.

If I’ve misunderstood you, apologies and if you could clarify a bit more then that would be much appreciated.

4

Yap you got it. Either you cover a piece, an get “non-clickability” for the on-page elements, or the FG’s children will not know how to stretch properly and will fall out of sync.

You cannot achieve what you’re looking to do with the legacy responsive engine AFAIK. You can, however, set % widths with the new responsive engine, which would allow the setup you’re looking for, while maintaining clickability.

5

I wonder, if you just need to make a group not clickable until you scroll down or up a bit, could you not use a “page scrolling position” conditional with “this element isn’t clickable”? Maybe I’m not getting what you’re trying to achieve here.

6

This is what I wanted. Thanks @duke.severn

1 Like