Wondering if anyone can help me with a responsive layout issue.
I have two groups with text boxes side-by-side creating two columns.
I have them reflowing perfectly to smaller sizes, where the group to the right moves below the first column on mobile.
I then add a shape that runs the fullwidth of the page behind these elements to create a coloured section background. As a result, the second group no longer moves below the first column on mobile but instead moves on top of the first group in mobile.
I haven’t seen that one before. Bubble must not think they’re on the same line, right?
Bubble has a thing about assuming any elements which overlap should be adjusted together. Maybe one of the texts is attached to the background graphic and the other isn’t?
Just something I picked up somewhere about how Bubble handles responsive design. If two elements overlap they get treated as one “group” by the responsive engine. More or less. It’s something that happens silently that you have to be aware of.
You should be able to see the effect pretty quickly by just putting two elements near each other, resizing the page, then overlapping them, and resizing the page. I think the engine treats them as being in the same “line”. Mostly they’ll break to the next “line” together.
Brilliant.
I just changed the shape to be a group with a fill and added it all to that group and it works perfectly.
So crazy i didnt think about that earlier.
I think Bubble should create a “logic” guide to responsive. I just finally realised that these groups are more like DIVs than a group. I finally get it.
