Responsive Mode

Hi-
I am trying to line up my two action buttons in responsive mode but they line up to the left. I played around with margins setting but it does not make any difference. Any ideas how to fix it?

Thanks,
Igor

Try grouping button elements.

1 Like

Hi @JohnMark
Thank you for your help! I grouped button elements but it looks like this now. They merged in mobile browser.

Hi @irotsenmar :slight_smile: This is definitely not intuitive, but the reason that happens is because the group which contains the buttons needs to create a slight margin above and below the buttons in the editor, to keep the spacing if the right button goes to the next line:

Here is an example with the text and buttons (I shortened some of the button text so both would fit on the same line for desktop and mobile):

Preview:

Editor:

In the screenshot below, the buttons are grouped together, and that button group is also in a group with the Header Text:

Since there’s currently a large space on the right side of the page (or a margin), Bubble will try to keep that margin constant unless you collapse the margins, or place an image or other element in that space. In this example, the outer group’s margins are set to collapse when the page width is less than 850 pixels (to prevent the right margin from taking up a lot of room as the page shrinks):

The text and group which contains the buttons are all left-aligned, so they will ‘stick’ to that left side of the page, aligned with the logo:

When the page shrinks to mobile width, it looks like this:

*This is not required, but I added a conditional statement to the header text which shrinks the font size when the page width is less than 500pixels:

And that should do it! :slight_smile: Feel free to let me know if you have any questions!

5 Likes

Hi @fayewatson
Thanks for the help! I still get the same issue with left button merging with the right button in mobile width. Let me know if you want to take a look at my app editor.

Sure! I can definitely take a look at the editor :slight_smile:

Thanks! how do I give people access? :smiley: I made it everyone can edit.

Ok great! To share the link, copy the URL of your editor and paste it in a reply here :slight_smile:

Got it! :slight_smile: The button group previously was this:

I increased the height of the group which contains the buttons down more, to add the margin on the top and bottom (this is what ensures the buttons don’t touch if the right one is moved to the next line):

Then moved the buttons slightly closer together:

Even with the buttons moved closer together, the width of the group is 419 pixels, and the buttons are set to fixed-width, which will cause the right button to go to the next line when the page is viewed on mobile (since mobile width is less than 419 pixels). But right now they go to the next line with the space:

If you’d prefer they stay on one line, you could use this size for each button from the previous example:

And this for the responsive settings of the buttons and group:

1 Like