Need help with responsive editor

Hey y’all! So I’m making a site, and I’m using the responsive editor to make it look good for mobile. However, the repeating group I have is cutting off the text that is inside it. Anyone know why? I’ll show pictures of my stuff below.

Video for reference: https://gyazo.com/58554a718e0566bd734c8897315da510

Repeating group:

One of the text’s that are being cut off:


Thanks for the help everyone!

-Jake

Two immediate issues come to mind:

  1. Within the text element, you want your min width to be larger than 6% of the current width. That’s 49px versus a min width of the RG cell of 318px. You want to think about the width of these 2 as a unit.
  2. But I think more importantly, you want the margins of the text element to collapse once its container reaches a certain width. This fella:
    Screen Shot 2020-10-27 at 5.32.57 PM

As an aside, and out of curiosity, why are you using an RG with 1 horizontal column? You could just use a group with the appropriate data source and then not have to bother with an RG.

The collapse margins function is only available on the RG and is not able to be even seen on the texts.

My text and button elements are above 6%, and yet nothing has changed. Any other ideas?

I’m using code to remove the scrollbar and replace it with icons, so the function of the RG is still the same, it’s just going to look different.

Thanks for the help, any other ideas?

That’s odd about the collapse margins not being available. Here is an example of a text element with it readily available:

Is your text element inside a group, or directly in the cell of the RG? Try putting it into group and see if that helps.

I am now able to use the collapse margins ability, however, it does very little. The text is still being cut off.


(Image shows the text at the top)

Maybe if you share your editor in read only mode, it could help with the problem solving.

Here it is

The issue itself is on the index page, on the repeating group that says “Parent Groups Package’s Title”. Its almost center of the page.

Someone once told me this a long time ago:
The most important thing to keep in mind with Bubble’s responsiveness is that it honors space above all else. So right now you have major space between your ionic icons and the end of the page. When you reduce the page it is honoring that space before collapsing the text.

Try this:
Put your icons and your RG inside a group. Then make that group’s margins collapsible. See if that helps.

It still has no effect. Nothing really changed.

So I finally found it out y’all! So I had to use invisible shapes (just turn opacity to 0) to make formatting work. Then, I had to go down by screen size and make them disappear when the screen size gets to small. Thanks everyone for the help!