[Power Apps #0122] A Beginner's Guide to Moving Away from Fixed Layouts to Responsive Design

Power Apps canvas apps can be designed so that the layout automatically adjusts according to the device. However, in practice, many people often find themselves wondering, "What should I do after turning off 'Fixed'?" or "What kind of formulas should I use?"
In this article, based on official Microsoft Learn information, I have summarized the concepts of responsive design and implementation tips in an easy-to-understand way from a developer's perspective.

Overview

In Power Apps canvas apps, you can build responsive layouts to provide optimal display according to the device or browser size.
The first step is to disable "Fixed," which allows the app to dynamically lay out according to the actual screen size.
Next, by using formulas instead of fixed values for the position and size of screens and controls, they will flexibly adjust according to the screen width, height, and the width/height of parent controls. Furthermore, the key is to design a hierarchical layout based on parent-child relationships by utilizing container controls and template structures within galleries.
Methods are also provided to switch layouts according to device rotation (portrait/landscape) and screen size (Small to ExtraLarge), enabling a more advanced user experience. This allows for natural UI display from small smartphones to large desktop environments.

Introduction

When creating a canvas app, you first select "Phone" or "Tablet." At this point, it is still a fixed layout, but turning off "Fixed" enables UI adjustments based on the actual device size.
With this as a premise, layout construction begins using the Width/Height properties of the screen and App.DesignWidth/DesignHeight.

Steps

1. Disable Fixed

• From the top menu of Power Apps Studio, go to Settings > Display and select "Responsive" from the App layout pull-down menu to select it

• At the same time, Lock aspect ratio will also be turned off
  → This allows the UI to change dynamically according to the actual device size

2. Obtaining and Understanding Screen Size

The following formulas are used for the screen:

• Width = Max(App.Width, App.DesignWidth)

• Height = Max(App.Height, App.DesignHeight)

This ensures that it does not shrink below the minimum design size (DesignWidth/DesignHeight) and that scrolling occurs when necessary.

3. Set Control Position and Size Using Formulas

Example: When filling the entire screen

• X: 0

• Y: 0

• Width: Parent.Width

• Height: Parent.Height

Always reference the parent control's size instead of using fixed values.

4. Flexible layout for multiple controls

For vertical splits, etc.,

• calculate positions using the Height or Y of other controls

• configure formulas so they automatically adjust when the size changes

5. Common layout patterns (margins, centering, etc.)

Microsoft Learn contains many specific formula patterns,

• centering

• right-aligning

• positioning with margins
  and other layouts can be implemented using common formulas. [note | PDF]

6. Hierarchical layout (Gallery / Container)

• Use Parent.TemplateHeight / TemplateWidth within a gallery

• Use Parent.Width / Parent.Height within a container to position child controls

• Using Auto-layout containers eliminates the need to specify X/Y

7. Layout switching based on device rotation (portrait/landscape)

By using the Orientation property,

• stack vertically for portrait

• arrange side-by-side for landscape
  —UI switching like this is possible.

8. Breakpoint handling based on screen size (Small to ExtraLarge)

Display can be changed using ScreenSize.Small (1) to ExtraLarge (4):
Example:
Visible = Parent.Size >= ScreenSize.Medium

9. Custom breakpoints

By changing the SizeBreakpoints property,

• you can set your own display switching points.

Next steps

For responsive design, it is important to get used to "expression-based UI design."
First, try creating a sample screen with "Scale to fit" turned off and check how the Parent.Width and Parent.Height values change.

After that, if you apply basic patterns such as top-bottom splitting, left-right splitting, and container usage to your own app, you will be able to experience the effects immediately.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🔧 I resolve the "I don't understand" moments for citizen developers in real-time.

・I don't know where newly added features are located
・The menu has changed, and I'm confused about how to operate it
・I don't understand "when and how" variables and collections change
・I don't have the concept of debugging and cannot trace the cause of errors
・I bought a template, but I'm anxious because it doesn't work in my environment

Using MS Teams screen sharing,
I work with you while actually touching the app

　✔ The intent of menus and the location of the latest features
　✔ The "why" behind development procedures
　✔ Understanding variables/collections by "visualizing" them
　✔ Basics of debugging (checking values, isolating issues)
　✔ How to think about robust configurations

I carefully explain these,
and provide support to create that "moment of clarity."

🔹 Premium (10,000 yen/month)
・Real-time sessions via Teams
・Chat consultation (issue isolation, reinforcing understanding)
・Mastering debugging methods (becoming able to fix things yourself)
・Configuration/design reviews to prevent recurrence
・Deep-dive technical live sessions

👉 Ideal for citizen developers who "can build it, but don't understand it."
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━