Forum Academy Marketplace Showcase Pricing Features

Two columns in a group messed up when shrink

Each column includes the image and the button. When the page shrinks, it becomes messy

Can anyone please tell me how to make the right image go under the left button?

It’s a responsiveness thing.
For good responsiveness, it is important to make groups strategically.
In this case, I would suggest grouping each image along with the corresponding button in a group each.
Then group these two groups together.
Now on each element (buttons and images), select them and from the top ‘Arrange’ menu select ‘center horizontally’. They will go to the center of their parent group.

Now in the group properties of the 2 child groups, make sure the minimum width property is set correctly (around 30-40% is my guess) - this depends on the size of screen you want to design for. It might take some trial and error.
Also make sure that the images and the buttons have a 20% min width.

With all this done, it should behave well :slight_smile:

Cheers,
Ranjit | Founder, Blur Apps
I’m available for Bubble one-on-one consultation sessions. Feel free to PM me to get in touch.

1 Like

Hi Rajit, thank you so much for the detailed instructions! It worked well after doing it according to the steps. The only problem is the buttons are aligned to the left rather than the middle. I’ve double-checked the buttons were centred horizontally. It is acceptable but I’m just wondering if there is a way to force the buttons to the centre?

Ah OK
In that case you’ll have to go to the ‘Responsiveness’ tab in the Editor, just below the page selection in the top left corner.
Here, find the buttons click on each of them and select the alignment as centre. The default tends to be left align.

In case the responsiveness tab doesn’t show anything, go back to the editor, click on the page element and uncheck ‘make this element fixed-width’.
That should enable the responsiveness options and you can do the steps I mentioned here.

Cheers

Thanks a lot!

1 Like