Canvas Apps render incorrectly on mobile devices

#Issue

A Canvas App renders correctly on a Windows screen and on tablets but displays an incorrect layout on mobile devices. The app uses responsive containers, yet controls may remain at tablet or desktop dimensions, overlap, become clipped, or stop responding to taps.

#Common causes

• Scale to fit or Lock aspect ratio is enabled.
• App.MinScreenWidth is set to a tablet or desktop width.
• Screens, containers, or controls use fixed widths and heights.
• Horizontal containers cannot wrap or change direction on narrow screens.
• Child controls have a large LayoutMinWidth.
• An invisible control or overlay is covering buttons or inputs.
• The mobile preview is stale and does not reflect the latest layout changes.

#Resolution

1. In Power Apps Studio, open Settings > Display and turn off Scale to fit and Lock aspect ratio. Turn off Lock orientation if both portrait and landscape modes are supported.

2. Select the App object and confirm that the minimum dimensions support the smallest phone. Example values are:

   MinScreenWidth = 320
   MinScreenHeight = 568
   

3. Make the root screen container fill its parent:

   X = 0
   Y = 0
   Width = Parent.Width
   Height = Parent.Height
   

4. Replace fixed control widths with parent-relative formulas such as Width = Parent.Width. For a maximum width that still fits on a phone, use Width = Min(500, Parent.Width).

5. Enable wrapping on horizontal auto-layout containers where appropriate. Use FillPortions, flexible widths, reasonable gaps, and smaller LayoutMinWidth values.

6. For layouts that need to change substantially, use a breakpoint:

   // Phone layout
   Visible = App.Width < 600
   
   // Tablet and desktop layout
   Visible = App.Width >= 600
   

7. If controls are visible but do not respond, inspect Tree view for transparent rectangles, labels, containers, pop-ups, or loading overlays above them. Confirm Visible = true, DisplayMode = DisplayMode.Edit, and that the intended control is in the correct layer order.

#Beginner-friendly mobile validation steps

Use the following sequence after making responsive changes. Complete the steps in order so that you can distinguish a layout problem from a publishing or device problem.

#Step 1: Confirm the app display settings

1. Open the app in Power Apps Studio.
2. Select Settings and open Display.
3. Confirm that Scale to fit is off.
4. Confirm that Lock aspect ratio is off.
5. Turn off Lock orientation if the app must support both portrait and landscape.
6. Select Save.

#Step 2: Check the phone layout in Studio

1. Select Preview in Power Apps Studio.
2. Choose a phone-sized portrait view, or resize the preview window until it is narrow, approximately 320–430 pixels wide.
3. Check every screen, not only the home screen.
4. Look for horizontal scrolling, clipped text, overlapping controls, and buttons that are partially outside the screen.
5. Resize the preview wider and narrower several times. The layout should reflow without controls disappearing unexpectedly.

#Step 3: Test the main interactions

For each screen, verify that you can:

1. Select every button, icon, link, and input field.
2. Type into text inputs and see the complete value.
3. Open and close menus, pop-ups, and dialogs.
4. Scroll vertically when the content is taller than the phone screen.
5. Move to the next screen and return without losing the expected state.
6. Read all labels and error messages without text being cut off.

#Step 4: Test portrait and landscape modes

If both orientations are supported, test each one separately. Rotate the device or use the orientation controls in the preview. Confirm that:

• The header and navigation remain visible.
• Content does not extend beyond the screen edges.
• Controls do not overlap after rotation.
• Forms and buttons remain usable.
• Any phone-specific and tablet-specific layouts switch at the expected breakpoint.

#Step 5: Save, publish, and test the published version

1. Select Save.
2. Select Publish and publish the latest version.
3. On the phone, close the existing app session completely.
4. Reopen Power Apps Mobile, or reload the supported mobile browser.
5. Open the published app rather than the Studio preview.
6. Repeat the interaction checks from Step 3.

The published app may continue to show an older version until it is reloaded. If necessary, sign out and back in to Power Apps Mobile, then open the app again.

#Step 6: Test on the smallest supported phone

Test on at least one real phone, preferably the smallest screen size that the organization supports. Check the app using the device's normal text size and display zoom. Also test with the phone held in portrait mode, because this is usually the narrowest available layout.

#Step 7: Record the result

For each tested device, record:

The rendition is working as expected when the published app passes these checks on every supported mobile device and orientation.

#If the mobile test still fails

1. Confirm that you are testing the newly published version.
2. Close and reopen Power Apps Mobile or reload the browser.
3. Check the root screen container's Width and Height formulas.
4. Search for fixed widths such as 1366, 1024, or 768.
5. Check App.MinScreenWidth and LayoutMinWidth values.
6. Inspect Tree view for an invisible control covering the button that does not respond.
7. Test a blank phone-sized screen. If the blank screen works, add the containers and controls back one at a time to identify the element causing the problem.

#Recommended layout pattern

Screen
└── Root vertical container (Parent.Width × Parent.Height)
    ├── Header container
    └── Content container
        ├── Phone layout (App.Width < 600)
        └── Tablet/desktop layout (App.Width >= 600)

#Additional information

• Build responsive canvas apps
• Set screen size and orientation
• Preview a canvas app