Responsive Floating Element

[ramya]

Hello Bubblers,

I have researched this before writing here with no luck. I have built a floating group to the right of the page, and as you can see in this screenshot, it is overlapping with the text when viewed on narrow mobile screens:

Is there a way to:

1. Bring it down to the bottom of the page as Airbnb does when on Mobile, screenshot:

And

2. Bring it up to the top of the page as Airbnb does when you scroll down the page, screenshot:

Any feedback would be helpful, thank you guys.

[rico.trevisan]

Position sticky is a great way to do these things.
TIL how to do sticky groups

[rpetribu]

But why are you using “Floating groups”? There is any good reason?
I don’t think this is the best way to build this layout (As AirBnB)…
I would suggest you to use regular groups…

[ramya]

Hello @rico.trevisan,

You have a great thread there, really useful, and here is what I learned:

1. Your sticky can be great and responsive to mobile, but it still stays on the right, it does not change to another shape at the bottom of the page

2. When I scroll down, your sticky can be replaced by another sticky, fantastic, but again I am looking for it to be replaced by a top banner instead. (This honestly isn’t an important feature, the first one with mobile is the key matter)

Love to show you the result I am hoping to achieve Rob, and your feedback is really valuable, thank you:

On Web (without scrolling down)

When you scroll down using web:

When you use “Mobile”

[rico.trevisan]

Thanks for coming back to share your learnings.
That’s looking fantastic!

[ramya]

Hello @rico.trevisan

I am sorry for not being clear, I am still asking, how do I do it as shown in the screenshots and GIFs I have sent?

Is there a way that when using mobile that the floating group goes from left side of the bag to the bottom and changes shape? As shown here:

[saviorabrams]

What you’re trying to build (based on the example given) isn’t a floating group. It’s just a two group layout on a row container. 1 group has all the information to the left, the other group has all the details to the right.

If you want to keep the floating group concept, you’re going to have to make the floating group visible at certain breaking points, and create another floating group to achieve the desired effect.