Repeating Group Responsive

[thomas.gounot]

Hi everyone !

I have an issue with the responsiveness of my RG.

Here is my RG on desktop :

But the height is still the same on my phone (which is clearly too long for us) :

We would like to put the picture like that and so collapse the bottom grey part :

But I don’t know how to do. I can share my app if someone can help me
Many thanks,
Thomas

[casheets123]

Bubble doesn’t do height responsiveness. Maybe one day they’ll enter modern times.

the most common approach to dealing with this is to swap to a different RG when page width is < number of px.

[boston85719]

On the image element there is an option to make the image keep proportions when page is resized…if your image is currently fixed width, remove that and make it not fixed width to access the option to keep proportions when page is resized.

The group that contains the image should change its height in accordance with the image element.

Here is a video of a fully responsive RG

rg

The fully responsive aspect of it is not just down to the image option for keep proportions when page is stretched, however, in your RG it should do what you want in terms of changing the height of the grey box and therefore bring up the text elements and overall change the height of the RG cells.

[thomas.gounot]

Ok it’s working, thanks @boston85719

But I still have this blank below and I don’t know where it comes from … :

Maybe from the RG itself or a group inside. I took a look during half an hour and I didn’t find. Do you have an idea ? Maybe I can share you my app in PM ?

Many thanks for your help

[boston85719]

Have a look at this editor.

Bubble Editor - Rgresponsivedesign

On the index page at the bottom is a basic version of the responsive repeating group I showed in the video.

If you don’t want a fully responsive RG then the issue you have with the extra space, maybe related to how the elements are grouped to gether.

When I make RGs to display products, I create a reusable element that is the ‘card’ to display all details of the ‘listing’. After that I drop it into an RG and I usually don’t have any issues.

[thomas.gounot]

Hi @boston85719

Thanks again, it’s working perfectly

Last issue ! My layout style of my Rg is “fixed number of cell” (4x3 so 12 items).

And at the bottom of the RG I have my pagination :

However on mobile, there is only 8 items in my RG and the 4 are on page 2 :

I don’t really understand this blank !

thanks
Thomas

[boston85719]

@thomas.gounot

However on mobile, there is only 8 items in my RG and the 4 are on page 2

Did this happen after implementing the changes to the responsive or was it like that prior?

Also, how are you setting up pagination? Are you using the built in features by Bubble?

[thomas.gounot]

It happens after implementing the changes to the responsive

I’m not using Bubble feature, I’m using ListoNumber and “Go to page” workflow

[thomas.gounot]

Ok problem solved. It was due to a group inside the RG which was not visible