Forum Documentation Showcase Pricing Learn more

Responsiveness Breakpoint question

Hi I followed some tutorials about making a Repeating Group responsive. I managed to get the the mobile portrait and desktop (stretch) the way I want. But I failed to do the same with mobile landscape and tablet portrait. Look at the images below

Desktop

Mobile Portrait


I know it is not exactly centered, but that will be the next step.

Tablet portrait


Here I would like to have the same (scaled) layout as I have on Desktop view

Mobile Landscape


Here I want the same lay-out as dektop or mobile portrait. That doesn’t matter to me.

I tried a lot like grouping elements, Add margins change min/max widths but I never reach the sweet spot that I want on all the viewports.

I hope some can help me with some hints.

I think the collapse margins option does the trick. I will fiddle around with this and post my results.

First findings:
Everything seems, but only the view from 667px width pushes edit button down. Maybe I need to make duplicate repeating groups for different views but that’s just not maintainable…

I also will try to use transparent shapes between the data items to see if this helps.

If someone has any thoughts on this please let me know. Thanks in advance

i do this, its fine. sometimes needed for horizontal cell rg but it looks like you dont have that.
try mess around with alignment or group the employee name separately, on its own.

Thanks. If regrouping and alignment doesn’t work I will fall back onto duplicate repeating groups.

Just another thing. I noticed that the horizon margins that are shown in red on the canvas are 2px larger than the x position of the element that is set in the options panel.

Is there a way to fix that?

the 2px is the border of the group. Thats how bubble calculates, its different to software like sketch & figma.