Why Build a Responsive Power App?

Most Power Apps developers struggle with creating an app that looks great across different screen sizes (phones, tablets, desktops).

• Problem: A layout that works on a desktop may be broken on mobile.
• Solution: Use Power Apps’ built-in responsiveness features to create a truly adaptive experience.

In this guide, we’ll cover:

✅ How to disable “Scale to Fit” for a fully adaptive app
✅ How to detect device type (phone, tablet, desktop)
✅ How to use container controls for responsiveness
✅ How to set up dynamic layouts using formulas
✅ How to handle screen orientation changes
✅ How to use flexible components instead of hardcoded positions

1. Detecting the Device Type (Phone, Tablet, Desktop)

Power Apps provides several ways to detect the user’s device and adjust the UI accordingly.

Use the App.Width Property

• Desktop screens are usually wider than 1200px
• Tablets are between 600px – 1200px
• Phones are usually less than 600px

To dynamically detect the device, use this formula in App.OnStart:

Now, DeviceType stores “Phone”, “Tablet”, or “Desktop”.

You can now use this to control visibility and layout properties throughout the app:

2. Using Containers for a Fully Responsive Layout

Instead of manually positioning controls, use flexible containers that automatically adjust when the screen resizes.

Key Containers to Use

• Vertical Container (auto-adjusts items stacked vertically)
• Horizontal Container (aligns items side by side)
• Flexible Height/Width Containers

How to Use a Vertical Container

1️⃣ Insert a Vertical Container from the Insert menu.
2️⃣ Set Width to:

(This makes it fill the screen dynamically.)
3️⃣ Inside the container, place buttons, text labels, and input fields.
4️⃣ The app will auto-resize as needed!

How to Use a Horizontal Container

1️⃣ Insert a Horizontal Container.
2️⃣ Set JustifyContent to: SpaceBetween (this evenly distributes items).
3️⃣ Use Flexible Width to allow items to resize dynamically.

3. Adjusting Layouts Based on Device Type

Now that we know the device type, we can change the layout dynamically.

Example: Show a Side Menu on Desktop, But a Bottom Menu on Mobile

1️⃣ Create two menus:

• SideMenu (for desktops)
• BottomMenu (for mobile)

2️⃣ Set their Visible properties:

📌 Now, desktop users see a sidebar, while mobile users get a bottom menu!

4. Handling Screen Orientation (Portrait vs. Landscape)

Many mobile users rotate their devices. We need to handle portrait and landscape modes dynamically.

How to Detect Orientation

Use the App.Height and App.Width properties:

📌 Now, you can adjust controls based on orientation!

Example:

This changes a gallery layout from list mode (portrait) to carousel mode (landscape).

5. Making Controls Resize Automatically (Dynamic Sizing)

Instead of hardcoding sizes, use percent-based sizing:

✅ Dynamic Button Width (fills 80% of the screen):

✅ Dynamic Font Size (scales with the screen):

✅ Adjust Gallery Items per Row (more items on wider screens):

6. Best Practices for a Fully Responsive App

✅ DO NOT use hardcoded values for Width, Height, X, Y positions.
✅ USE containers instead of manually positioning controls.
✅ Make text auto-size using App.Width * %
✅ Test on multiple screen sizes (use Power Apps Studio’s Preview for different resolutions).

7. Full Example: A Fully Responsive Header Bar

Here’s how to create a dynamic header that changes layout based on device size:

1️⃣ Insert a Horizontal Container

• Set Width to Parent.Width.
• Set JustifyContent to "SpaceBetween".

2️⃣ Inside the Container, Add:

• A logo (left)
• A menu button (right)

3️⃣ Adjust Visibility Based on Device Type

📌 Result: The header adapts automatically to desktop, tablet, and mobile!

8. Conclusion: What You’ve Learned

By following this guide, you can now:
✅ Detect if the user is on mobile, tablet, or desktop
✅ Adjust layouts dynamically using containers and formulas
✅ Change UI components based on screen size & orientation
✅ Scale controls dynamically using percent-based sizing
✅ Make your app truly responsive for any device 🚀

9. Bonus: Responsive Design Cheat Sheet