Responsive design with containers
1. Responsive design with containers
Real users open Power Apps on phones, laptops, and tablets. This video is about responsive design, building layouts that bend without breaking.2. Why responsive?
Imagine someone checking records on their phone during a meeting, editing details on a tablet at a help-desk counter, and triaging on a laptop back at their desk. The same app opens on all three. A fixed layout clips controls on the phone and looks lost on the laptop. Responsive design means the layout adapts to the available space without you authoring three separate apps.3. Modern layout containers
The control that does the responsive heavy-lifting is the Layout container, and modern Power Apps ships two flavors: Vertical and Horizontal. Drop one onto your screen, drop other controls inside it, and the container handles spacing, alignment, and resizing automatically. Vertical stacks its children top-to-bottom; Horizontal lays them left-to-right. When the screen gets wider or narrower, the container reflows its children. There's no pixel math and no per-control resizing.4. Flexible width and height
Inside a Layout container, every child gets two properties that control how it behaves when space changes: FlexibleWidth and FlexibleHeight. Switch them on and the control stretches to fill the available space; leave them off and it keeps a fixed size. A gallery, for instance, might want FlexibleHeight on so it grows when the screen is tall, but FlexibleWidth off to stay a sensible reading width. You can mix and match the two on any control.5. LayoutMinWidth and LayoutMinHeight
The other two properties to know are LayoutMinWidth and LayoutMinHeight. They set the smallest dimension a container needs before something else has to happen, typically reflowing children or breaking a row into stacked columns. For example, a gallery and filter panel can sit side-by-side at tablet widths, but on a phone the panel collapses and the gallery takes the full screen. LayoutMinWidth is what triggers that switch. You won't use these in the exercises, but they're worth knowing for production apps.6. App display settings
Once you've wired up containers and flexible sizing, you configure how the app responds to different screen sizes. Open the app's Settings from the toolbar and go to Display. The key setting here is App layout. It defaults to Fixed, which keeps the app at one aspect ratio and simply zooms it to fit the screen. Change it to Responsive, which also unlocks the aspect ratio, and the app fills the available space instead. That's what lets the Layout containers and LayoutMinWidth rules from earlier actually respond, so one app handles phone, tablet, and laptop sizes.7. The predefined layouts
One practical recommendation for your future builds: don't start from a blank screen. Power Apps Studio ships with predefined screen layouts that are already wired with Layout containers and sized to behave well across phone, tablet, and desktop. Click + New screen and you'll see Sidebar, Header and footer, Split screen, and a few others. They're responsive out of the box. Picking the right template and customizing from there is almost always smarter than fighting a blank canvas with container math yourself. Your Browse screen could have started from one of these layouts, and you'd have wired less plumbing.8. What you'll build
In the exercises you'll wrap controls in a Layout container with flexible sizing, then switch between phone, tablet, and desktop sizes to see the app adapt.9. Let's practice!
Time to make your app responsive.Create Your Free Account
or
By continuing, you accept our Terms of Use, our Privacy Policy and that your data is stored in the USA.