Responsive Moving Elements to New Line

This is probably a simple fix but I am stuck trying to figure it out.
I have a type of header element with four buttons. When I go to responsive mode and make the screen size smaller, it makes the group taller and stacks the buttons instead of keeping them in line. There is still enough width to fit all the buttons horizontally (they are currently fixed width).

The “Explain Box Margins” says it will reduce the left margin before breaking elements to next line, but this does not seem to be the case. I want the header to stay the same height and the buttons to stay on the same line. Any ideas how to do this?

And after screen has been made smaller


Hi did you figure out how to fix this? I am having the same problem.


Hard to recall exactly what I did as that app has changed a lot since then.

I might have made the Group containing those Buttons wider and made it Fixed Width. Or some type of combination of Responsive settings (fixed or a set Max and Min) for the Buttons as well as the group containing them. Unfortunately I do remember it being lot’s of trial and error


I had an issue where it looked great in browser but on mobile device would wrap… even when they were grouped… overlapping the text objects did the trick! Thanks for the tip on that one (from another thread) :slight_smile:

1 Like