Can't get groups or elements to kick to the next line on responsive pages

I have elements that won’t automatically move below each other when the page gets smalled. I’ve tried putting them in groups and ungrouping them and putting them all into the same group. Can’t seem to find the trick.

What am I missing to keep groups / elements from overlapping in responsive designs?

Hey @daniel.chancellor :slight_smile: Welcome to Bubble! If groups or elements are overlapping, it could mean they are slightly overlapping in the editor, or have elements beneath them that are interfering with the responsive settings. For example, placing groups on top of each other (even though they are shown at different times) can cause this. Can you share a link to the app editor?

Thanks for the welcome!

Here is an example: https://gyazo.com/a8b197880c770e2b67137ef656164f9a
I colored the groups blue and green so it’d be easier to see. I moved them to the bottom of the page, outside of any other groups, and it’s still happening.

Here is the editor link: https://bubble.io/page?name=index&id=brosbookie&tab=tabs-1

Thanks for your help!

1 Like

No problem at all! My apologies, I forgot to also ask if you could temporarily set the app to public? If you go to Settings --> General --> Application Rights: Everyone can edit that will allow me to view the editor :slight_smile:

Done!

It looks like the link element, submit picks button and checkbox are overlapping the groups (even though they’re hidden) which is causing the error with responsive:

I set those groups to collapse in height when hidden:

Then moved the other three elements to go beneath the groups:

This way, when the other options are shown instead of the groups - the elements will occupy the space where the groups were originally. And the groups will stack as they should (shown below). That should do it! :slight_smile:

Wow, thank you for all of the help. So does this mean that any overlap of groups or elements will screw up responsiveness?

1 Like

No problem at all! Yes, generally, I’ve found that to be true! Sometimes the results can be okay (such as putting text over a large shape instead of inside a group), but almost always I try not to have anything overlap. :slight_smile:

Got it. I can see that happening elsewhere. Good to know. Thanks for the assistance!

1 Like

Hi,

Great solution you have here. I noticed that you have some additional options which i don’t see in my responsive settings. such as the collapse this elements height when hidden.

Does it apply to specific scenarios or elements?

1 Like

That’s only available for groups.

1 Like

Thanks, @adunniola! Yes, it only applies to groups as @andrewgassen said. :slight_smile: You’ll find the option in the property settings of the group here:

Thanks so much for the clarification. I however have a reusable element which i created for my menu. I notice that it overlaps some other elements when i’m viewing on mobile and these elements do not work. Is there anyway i can edit the actual element using your example above such that when the f=group is collapsed, it does not affect any other element

Hi i tried with a group and still do not have the option.

Is there something im missing?