Power Platform Community Forum Thread Details

Hi Community,

I have developed a Canvas App using the Responsive layout format so that the app dynamically adjusts based on the device being used (laptop or monitor).

However, I am currently facing an issue where the app is not fitting dynamically on all screens. When users access the app on the browser at 100% zoom, the full screen is not visible, and parts of the app get cut off depending on the laptop or monitor size.

Has anyone faced a similar challenge?

I would appreciate any suggestions or best practices on how to ensure the app dynamically fits across different screen sizes and resolutions without requiring users to adjust browser zoom settings.

Thanks in advance for your support!

Categories:

Building Power Apps

Hi @SM-26021130-0,

Even when using Responsive layout, a Canvas App does NOT automatically scale. It only reflows components based on available width/height.
This means:

If controls use fixed pixel values
If galleries/cards have minimum sizes bigger than the screen
If containers use formulas assuming a standard resolution
If the app uses the classic responsive model (App.Width/App.Height)

The app will look fine on some devices but overflow on others. Canvas Apps never auto-zoom like websites, so you must design for true fluid resizing.

Best Practices to Make It Fit All Screens Dynamically
1) ALWAYS build using the new “Modern Controls + Container Layout” responsive engine
Make sure every section of the screen is inside a horizontal/vertical container with:
Width = Parent.Width
Height = Parent.Height

2) Avoid fixed widths or heights (e.g., 1366px, 1000px, etc.)
This is the #1 cause of cut‑off screens.
Instead of:
Width = 1200
Height = 800

Use:
Width = Parent.Width * 0.33
Height = Parent.Height * 0.25

This ensures scaling regardless of monitor size.

3) Use FillPortions whenever possible (modern controls)
4) Avoid absolute X/Y positioning — anchor EVERYTHING using containers
5) Let scrollable screens absorb overflow
Even with containers, some screens may still overflow vertically depending on content.
If you want to prevent horizontal overflow:

Enable “Scrollable screen”
Set ScrollDirection = Vertical
Keep Width = Parent.Width, but let Height exceed the viewable area

This prevents cut‑off content.

6) Ensure the app screen size + orientation settings are correct
In App → Settings → Display:
Enable Scale to Fit OFF
Enable Lock Aspect Ratio OFF
Orientation = (your choice)
Disable “Optimize for presentation mode”
This ensures your app uses actual device resolution, not a fixed aspect ratio.

7) Test using App Preview panel (simulated devices)

References:

https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/create-responsive-layout

https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/build-responsive-apps

https://www.youtube.com/playlist?list=PLTyFh-qDKAiHe6pHdlyBbRK1b44bNAAN_

https://www.youtube.com/watch?v=vFMOrEZGRnI

https://www.linkedin.com/pulse/how-create-fully-responsive-power-apps-any-device-m365-show-sidwc/

✅ If this answer helped resolve your issue, please mark it as Accepted so it can help others with the same problem.
👍 Feel free to Like the post if you found it useful.