2 Column repeating group showing one column on Mobile

Hi everyone, I am having a problem with my RG. I have set it as 2 columns as below.


Index page Width - 380px , RG width - 380px

When I preview on my laptop browser, it display properly but on my mobile phone, it shows as a single column RG.
However, when I reduce the width to 360px, it displays properly on my phone.


What could be the reason for this?
How can I make sure it displays 2 columns on my phone using width 380px for the RG?

Hi @bosunjohnson ,

make sure that every element such as a group or text or image… inside of the RP is responsive. That means those elements should not have a fixed width. Have a look at the minimum width the elements should have to fit on mobile screens. My suggestion would be around 20% in your case.

Also I usually put elements inside a RP into another group and make it a minimum width of 20-30% to be responsive.

Thanks @daviddr17

When I tried to uncheck the fixed width, the repeat group filled the screen on my laptop browser which I don’t want.
I am building a one page app that uses groups to show and hide the sections.

Any other ideas?

@bosunjohnson when you uncheck fixed width you will see the following options:

  1. minimum width as mentioned in my previous post

  2. maximum width: if you don’t want to have the image bigger than it is, just type in 100%.
    You can also type in here values bigger than 100.

You can play a little bit with the values inside to have the best result on mobile as well as on laptop.

Another tip: center the images with html code, that looks better in the most cases.

Hope that helps you.

2 Likes

@daviddr17 I’ll give it another shot based on your recommendations. When building native apps, what is the recommended page width? Also is the repeating group meant to also be same width as the page?

  • Explore setting the minimum cell width of the rg. Please notice that I am referring to a specific cell setting.
  • First iPhones 320 px wide. Latest iPhones from 375px wide and on.
  • I strongly suggest you explore the teachings free and paid available in buildcamp.io on responsiveness. They also have a great YouTube channel. Here a worthwhile watch:
1 Like

@bosunjohnson i am not experienced in building native apps, but I would suggest the following procedure:

Your page has a specific width, let’s say 1000px. (just an example)

Then think of which is the smallest screen where your app will be viewed.

Let’s say it will be an iPhone 5 with a screen width of 640px.

In conclusion that’s 64% of the original size.

That means to display everything correct every single element has to have a minimum width of 64%. (It is also possible to have some bigger elements and another elements with a lower width, but in the end it should fit together)

If the smallest screen will be smaller then choose a different width of course.

It also makes it easier when you group elements together and give the group a min and max width as well as the elements. So you can also choose as an example that just one element inside should change the width and another element should stay as it is.

All in all you have to calculate a little bit, maybe it is easier for you to draw it on the paper and divide the repeating row into parts.

1 Like

Please note that iPhone 5’s width is much much smaller than 640px wide.

To approach the design of a Bubble mobile app perhaps it could be good to think “mobile first”. This means to set your total page width to a mobile size width. To cover most sizes including older smartphones this width is 320px.

Another tip to consider is to explore mobile type templates that are built and ready in the Bubble marketplace. This way you can evaluate how different Bubblers have tackled mobile design in Bubble.

1 Like