Master Responsive Power Apps Design in just 1 hour | Complete Beginner Tutorial

Tech concepts / product features covered (Responsive Canvas Apps in Power Apps)

Three components that must work together

Responsive Power Apps depend on three components working together:

1. Device screen size & aspect ratio (including orientation: portrait/landscape)
2. Canvas app code (controls, layout formulas, responsive logic)
3. Power Apps engine (renders the UI based on the above + app settings)

If any of these are misconfigured, the UI breaks—for example, the engine locks aspect ratio or the code isn’t responsive.

---

Power Apps engine setup (to enable responsiveness)

In Power Apps Studio > Settings > Display:

• Turn off Scale to fit
• Turn off Lock orientation
• Turn on Show mobile notification area
  • This ensures content starts below the notch/camera area. Otherwise, you may need extra padding to avoid cut-off.

---

Breakpoints / screen-size categories

Microsoft default breakpoints create up to 4 unique layouts based on screen width:

• < 600: mobile (size 1)
• > 600 and < 990: tablet vertical (size 2)
• > 900 and < 1200: tablet horizontal (size 3)
• > 1200: desktop (size 4)

Power Apps uses a calculated screen size value (commonly referenced like Screen.Size-style values):

• 1..4 map into “small/medium/large/extra large”

Custom breakpoints are possible, but the “screen size variable” only maps to the standard set—so adding more breakpoints may lead to values beyond what the variable supports.

---

Two core rules for responsive canvas app code

1. Control sizing must be relative

   • Size controls relative to the screen or a parent container (avoid manually fixed widths).
   • Best practice: use a root container as the base for relative layout.
   • Multiple root containers are allowed for layered UI (e.g., popups, notifications, overlays).

2. Use screen sizes/breakpoints to drive visibility and properties

   • Examples:
     • Show/hide controls: set Visibility based on Screen.Size equals a specific size.
     • Adjust properties like font size, padding, container direction, etc. using formulas/switch logic.

---

Container wrapping for responsive rearrangement

The Wrap property helps move items to the next line when space is insufficient. For correct wrapping behavior, the tutorial emphasizes these requirements:

1. Set item width appropriately (account for padding/gap and desired items per row).
2. Set item height.
3. Set parent container height (especially when using wrap so the parent expands correctly).

---

Tutorial workflow: building an example responsive design

Prerequisites

• Part 3 builds on the earlier “Container layouts and responsive design” series.
• Key focus areas in this build:
  1. Configure Power Apps engine + breakpoints
  2. Fix layout for each breakpoint (mobile/tablet/desktop)
  3. Implement layered menus (popup vs side menu)
  4. Redesign dashboard sections with wrapping and dynamic sizing
  5. Apply responsive height logic, including flexible height scenarios

---

Menu responsiveness (mobile vs desktop)

Implements layered containers:

• Base root screen container
  • Move the existing main container into it
• Add a popup menu container overlay

Also includes:

• Click outside to close
  • Uses an overlay button covering the screen behind the expanded menu
• Screen-size-driven visibility
  • Popup shown on mobile + vertical tablet
  • Side menu shown on horizontal tablet + desktop
• Per-breakpoint tuning
  • Adjusts logo/font sizing and other spacing based on screen size

---

Dashboard resizing & repositioning

Uses Wrap + container height calculations to demonstrate:

• Keeping a consistent two-line section structure
• Stacking overview content vertically on small screens
• Splitting into multiple lines/columns on larger screens

Height strategies shown:

• Dynamic height from fixed-height child items
• Static container heights with flexible child controls
• Dynamic height driven by gallery/table content (flexible height + stretch + wrap integration)

---

Gallery / table scaling on smaller screens

On smaller screens, the example:

• Reduces visible records (e.g., show first 7 instead of 14)
• Hides columns to prevent horizontal scrolling
  • Only key columns remain (e.g., icon/category/subject/button), while other text columns are hidden
• Uses gallery settings:
  • Items per row via count changes (e.g., 4 → 2)
  • TemplateSize updated to match the new layout
• Makes cards clickable even when actions are hidden
  • Adds a transparent button overlay to preserve interactivity

---

Form responsiveness (phones / data entry)

Default responsive behavior

• The Form control (vs manual form layout) is responsive by default
  • Data cards stretch vertically
  • Internal labels/inputs align relative to each other

Optional customization

If further customization is needed:

• Enable WidthFits on data cards
• Optionally set data card width relative to the parent container (including half-row layouts per breakpoint)
• Ensure the form is inside a container so it inherits correct width/height

---

Reviews / guides / tutorials focus

This is positioned as a complete beginner tutorial and in-depth guide for:

• Making Power Apps responsive across desktop, tablet, and mobile
• Applying core responsive rules:
  • engine settings
  • breakpoints
  • container root patterns
  • wrap
  • visibility/property formulas
• Practical implementation of menus and dashboard sections across breakpoints

It also references a progression (e.g., Part 1 / Part 2 as prerequisites).

---

Main speakers / sources

• Main speaker: The YouTube creator/instructor (referred to as “this guy”, “part three”, and teaching from the channel; references their earlier series)
• Primary source referenced (documentation concept):
  • Microsoft Power Apps default breakpoints
  • Power Apps controls/settings related to:
    • engine rendering
    • screen sizing
    • form control behavior