Build a responsive Power Apps screen with containers
A Power Apps screen breaks on different screen sizes when controls are pinned with fixed X/Y coordinates instead of sizing relative to the window. Immediate fix: in Settings > Display, turn off Scale to fit (this also turns off Lock aspect ratio; turn off Lock orientation too if the app should rotate), then base sizes on App.Width and Parent.Width instead of hard-coded pixels. Durable fix: rebuild the screen with horizontal and vertical auto-layout containers. Give fixed elements a fixed size, turn on Flexible width or height with Fill portions so the other children share the extra space in proportion, and nest containers to form rows and columns without manual X/Y math. For phones, switch a container’s direction or visibility based on the screen’s Size or App.Width so a two-column layout stacks.
Turn on responsive mode
- 1In Settings > Display, turn off Scale to fit so the app uses the real window size. Lock aspect ratio turns off automatically; also turn off Lock orientation if the app should follow device rotation.
- 2Base sizes on App.Width / Parent.Width instead of hard-coded pixel positions.
Use layout containers
- 1Build screens from horizontal and vertical layout containers that position their children automatically.
- 2For each child, choose a fixed size, or turn on Flexible width or Flexible height and set Fill portions: the flexible children share the container’s extra space in proportion to their portions (for example, portions of 1 and 2 give one third and two thirds of the extra space).
- 3Nest containers to create rows and columns without manual X/Y math.
Add breakpoints
Make the breakpoint a formula, not a one-time assignment. Each screen has a Size property (ScreenSize.Small to ExtraLarge) computed from App.SizeBreakpoints, which you can customize. For controls inside containers, reference the screen by name (for example HomeScreen.Size), because Parent points to the container. You can also compare App.Width in a named formula in App.Formulas so the value recalculates on resize. Then drive a container’s Direction property (LayoutDirection in the formula bar) or its Visible property from that value so a two-column layout stacks on phones. Avoid setting a context variable once in OnVisible: it does not follow later window resizes.