How to use breakpoints in Responsive Layout
When you are using Responsive Layout on mobile devices, you might want to adjust your layouts to allow space for the phone top menu items in portrait mode but have no extra space allowance for landscape mode when these items are not shown. To do this you can use the Responsive Layout breakpoints. Note: in this context, breakpoints are unrelated to the breakpoints you would use for debugging in the script editor.
This lesson assumes you already have the Responsive Layout addon and the Magic Palette needed to use it.
There is a sample test stack available here.
In LiveCode, create a new blank stack and drag out a rectangle graphic (1). From your Plugins menu (2) open Magic Palette (3).
In Magic Palette, select "fixed" (1) from the Type dropdown, and enter 0 in the Left (2) and Right (3) boxes. You'll see your rectangle stretch the width of the card.
At the bottom of Magic Palette, select the mobile environment (1). The orientation of the screen can be toggled between portrait and landscape with the Orientation button (2).
Your stack now should look something like this:
Make sure none of the options under "Properties saved at this breakpoint" are selected initially. Adjust the position of the rectangle so that the top is at the desired location (1), then click on the "top" option in the "Properties saved at this breakpoint" list so that it is now highlighted (2). This saves the top position of the rectangle when the device is in the mobile portrait orientation.
Click on the Orientation icon in the Magic Palette (1). Your stack will flip orientation. Unselect "top" from the "Properties saved at this breakpoint" list. Adjust the position of the rectangle so the top is at the new desired location for this orientation (2), then reselect "top" (3) from the "Properties saved at this breakpoint" list so that it is highlighted again. Now the rectangle will be at this top position when the device is at the mobile landscape breakpoint.
These steps can then be repeated for any other breakpoints, for example to set the rectangle's top position for the tablet vertical orientation.