This content has been archived. It may no longer be relevant.

This page is meant to be a reference page for responsive design layout patterns with Power Apps canvas apps.

2021-01-07: The last 2 layout patterns will be added very soon!

In November 2020, Microsoft released new Power Apps features to be able to make responsive canvas apps more easy:

Responsive previewer
Horizon container
Vertical container

There are already several responsive designs layout patterns defined by responsive design specialists. This reference page contains per layout pattern a link to a page containing more detailed information on how to achieve that specific layout pattern with canvas apps.

I am experienced with Power Apps canvas apps but no responsive design specialist. If you have any feedback related to this reference page or the layout pattern pages, please let me know using the form at the bottom of this page.

Horizontal centered

Click here to go to a page describing the “Horizontal centered” responsive design layout pattern. There are 4 types:

Horizontal centered fixed width.
Horizontal centered maximum width.
Horizontal centered variable sidebars.
Horizontal centered fixed sidebars.

Header and Footer

Click here to go to a page describing the “Header and Footer” responsive design layout pattern.

Mostly Fluid

Click here to go to a page describing the “Mostly fluid” responsive design layout pattern.

Column drop

Click here to go to a page describing the “Column drop” responsive design layout pattern.

Layout shifter

Click here to go to a page describing the “Layout shifter” responsive design layout pattern.

^^ The link is not yet active. Working on the blog post/video.

Off canvas

Click here to go to a page describing the “Off canvas” responsive design layout pattern.