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, 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. No pixel math, 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 Scale to fit. It's on by default, which keeps the app at a fixed aspect ratio and simply zooms it to fit the screen. Turn Scale to fit off, 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
The big practical recommendation in this video is to not start from a blank screen for your first responsive app. 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've started from the List layout, 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.