Responsive Button Layout

Resize the window on your browser or turn your phone from portrait to landscape and you will see the buttons start looking weird and then the logo at the top disappears.

Any help please?

The first item to mention is that if you turn off all pins (instead of have them all on like you do), you’ll have proportionate positioning instead of margin-preserving/centering positioning. I don’t think this will yield the results you want, but I thought it would be worth mentioning because it may get you a little closer and is a good mode to learn.

Now onto some real solutions… There’s two basic ways you can approach this:

  1. Use a different Responsive Layout. Layouts were designed for this type of situation where there’s a radically different need. They are basically a separate scene that is invoked instead, so you can rearrange items to your heart’s content to how they may look better on a landscape layout. (You can also combine flexible layout and responsive layouts.)
  2. Use Zoom Scaling for everything. Zoom scaling will resize all the inner contents like an image. The steps to do this would be:
    1. Put everything in a top-level group
    2. Size the group to match the scene
    3. For Flexible Layout, turn on all pins and sizing controls for the group, turn on “Zoom contents,” and set the scale behavior to “shrink to fit”