[Update] Stack and Center objects in Responsive mode

Hi all,

I am started again with my test app, and I want to have responsiveness in mind from te beginning. But I am stuck with something

On a large desktop screen this is how Logo, company name and company type are shown. This is how I want it for this screen type.

But on smaller mobile view I want to stack the logo, company name and company type below each other and align them centered at the screen. This is the thing I am not able to accomplish. It looks like this:


I tried to use different group setups, now I have:

  • Group: Company Details
    ** Group: Company Logo, (Company name and Company type)
    *** Group: Company name and Company type.

Like this:

Using center alignment in responsive mode doesn’t work for me. Can someone help?

I have 2 separate groups. When screen width is larger than XXX resolution, show Group 1. When the screen width is smaller than XXX resolution, show Group 2. This helps me avoid the alignment headaches altogether.

Thanks. I will go for this for now, but I was hoping there is way that is more manageable in the long run, minimizing duplicate components/groups.

I think that should be doable, but honestly, I often have to fiddle quite a bit to get the desired behavior. Bubble’s responsive functionality is, IMO, not particularly intuitive or simple to master. Something that has helped me, though, is designing the mobile layout first and then using the responsive editor to get it right on desktop. YMMV though.

Thanks. The first method worked. I will also try the one designing mobile first and I will share my experiences

I tried building from a mobile first design, and my conclusion is that for this specific scenario I do need duplicate groups. One fully stacked and centered, the other with logo and company name left aligned on the first line and company type below.

One advantage is that I do understand the behavior of the responsiveness engine a bit better now.

Just another question regarding responsiveness in addition to the things mentioned above.

Is was testing out building my UI from Mobile first perspective. It goes quite well, but something bugs me a bit.

I created a container group of 375px in width. In there I stacked a couple two child groups. The yellow group is setup to “wrap to previous line when stretched”. I tweaked the minimum width a bit and it works, but the first group (green with red group as a child) is a bit too wide for my taste. I would like to have it around 200px.

I thought to manage this to give it a maximum width around 70% but that’s not working. According to the docs this value should be more than 100% and that I don’t understand actually. Why can’t I set a width less than 100%. Goes this against the minimum width setting perhaps that must be less than 100%?

Below there is a screenshot of my responsive behavior when stretched. There a two layout examples. The layout above is mobile first. The layout below is desktop first, but looking more the way I want it. A smaller left group/“sidebar”.

So is it possible to make the first group smaller in width while working from a mobile first perspective? Because besides my issue I really like to build from this perspective.

Thanks again.

Did you try making the width of the red/green column narrower in edit mode - i.e. in the UI Builder?

Update: Fixed it with transparent shape on the left of the green/red group with a hiding rule set to <= 1200px.

Thank for the tips

I tried this, and get the following effect.

UI builder:

The black group is the Mobile Container which is centered on de 1200px wide page. It is set to collapse margins when screensize <= 4100px (got that method from a youtube video).

Responsiveness - Mobile
This works perfectly

Responsivess - Desktop (stretched)
Problem is the left margin of black mobile container, off which I can’t get rid off. This margin makes the red/green “sidebar” group being misaligned to the right.

So now I am stuck again :slight_smile:

Just another thing I can’t get the way I want it:

Below an example of the mobile view (portrait) I would like to have. White cards wit a small margin

On mobile view (landscape) it looks like this.

But I want this layout only from Tablet size (portrait) and wider. On this screen size I want to have it the same way as mobile (portrait): stacked, centered and with the small left/right margins.

So I increased the minimum width. But that causes the following effect on mobile (portrait) mode.


The left and right margin disappears as stated in de margin explanation.

So I wonder: Are the responsiveness settings that I want possible or should I change my requirements? If possible, how should I do it?

Thanks again.

Just checked some templates and other apps. My conclusion is that I just let the mobile (landscape) mode the way it is, with he groups next to each other.

Next step is a mobile and wise screen responsive menu.