Resizing issue, some work, others don't even though same settings

Hi all,

I am having an issue with the resizing of some of my elements.

If you go to the link and search “Brian” select the first name that pops up. Scroll down to where you see the 3 different colored repeating groups. They each have their own type of comments. When I resize the page, the Blue RG doesn’t resize properly, specifically for when the phone is in landscape mode (portrait mode is fine). I have the exact same settings (sizing-wise, the dynamic content just pulls different comments but the repeating groups are all structured the same way) for all three, yet the Blue RG is not filling the entire page like the Green and Red repeating groups. I noticed that I have all 3 set to have a minimum width of the current width (current width = 350px), but the Green and Red RGs take up a width of 167% when I go in Landscape view on my Phone (and in the UI Responsive Editor), while the Blue RG maxes out at the 90% minimum and doesn’t go to a 167% width in order to fill the entire screen. Why is that?

Any suggestions on how to fix this?

Hi, :wave:t2:
do you have pictures from your editor for each group or repeating group inside groups?

With these pics It’s easier to find the issue

Hey @juancamilovasquezard,

Maybe try using the :process with imgix setting on your images? I attached a screenshot below.

Hi @jhonny , thanks,

but I thinkt that @kngf222 is having a reponsive issue in his repeating groups or a container group.

I’ve uploaded images of the editors for the groups and the repeating groups inside those groups. Let me know what you see.

“Worked Strategies” is green, “Didn’t Work” is red, and “Additional Comments” is the blue one

Do you want that on mobile all of them have a width of 350 px and on pc the blue repeating group fill the same space that the green + red have, right?

So you can try doing this:

  1. Uncheck This Repeating group has a fixed width in the 3 repeating groups.
  2. Uncheck Apply a max width in the 3 repeating groups.
  3. Apply a cell min width of 100 px to all of them
  4. Set the Blue repeating group width to: red group width + space px betwen red and green
    group + green group width.

For example if red group and green group have each one a width of 350 px, and the space between them is 100 px = 350+100+350=800 px, so in the blue group set the width to 800 px. but with cell min width of 350 px.

  1. Group each Repeating group inside a Group (with the same height and size)
  2. Uncheck fixed width in thre 3 new groups.
  3. Uncheck apply a max width to the 3 new groups.
  4. Set a min width 99% to the red and green group (not to the repeating groups).
  5. Set a min width of 43% to the blue group (not the blue repeating group).
  6. Adjust manually in the responsive tab the width for mobile to match the others groups width.

I created this example to you:


Video here:

Test in the Bubble Editor here: :point_down:t2:

Best wishes,


Hey Juan,

That worked for the repeating groups! However, the Blue Repeating Group is having issues with the content inside of it. It does not resize like the content inside the Green and Red repeating groups. At first, I had the Blue RG’s content set the exact same as the Green and Red repeating groups. That didn’t work, and so I tried making the minimum width’s of the elements 43%, 99%, and 100%, but none seemed to work, unless I was doing something wrong.

I have attached screenshots of the editor for it. Thank you in advance if you are able to help out even more!!

P.S. The video you sent was super helpful!! Video solutions are my favorite thing :slight_smile:

Don’t worry :smiley:

Do you want the input and the button to be as big as the blue repeating group?
(to do this, make them maybe 620 px and center them horizontally, and try giving them a minimum width of 20 and uncheck the apply max width)

Or to have the same width as the others inputs on the other repeating groups?
(you can try this: set the width to all as the others elements in the other repeating groups. Then, group all of them in a new group and center it, and set to this new group a min width of 99% and uncheck the apply max width. To the hands green and red button, make the container group as fixed width or with a min width of 99% and uncheck a max width).

Actually I’m a little tired lol (here is 1:39 am :sweat_smile:), but may works, or tomorrow I can check it again.

Best wishes,


I got it looking GREAT now!! Thank you so much!!

Also, Bubble needs to figure out a way where you don’t have to enter in odd looking percentages for the width such as 43% lol

Yes, sometimes it’s a little bit tricky.

Hope you continue advancing in your app. If you need anything else, you can send me a message and I can do tutoring 1 to 1 or develop some sections for your app. :computer:

Have a great day !

Juan :smiley: