Show all fields inside a Power apps form in a Vertical layout of 1 column instead of 3 columns on small screen sizes (mobile screens),

Question

I am trying to make my Power Apps standalone have a responsive design similar to Bootstrap effect. where if we have a form with 3 columns, as follow:

Now if we view this form using Power Apps mobile app or using mobile web, I want to show the fields dynamically in one column as follow:

So is this possible? I hope so.

Here is my current settings for the Power Apps:

The form:

Display settings of app:

Any advice please? my application will be accessed mainly using 3 devices/screen:

1. Desktops & Laptops

2. Mobile phones (mobile app + mobile web)

3. pads & tablets

Answer 1

You can set the value for "Columns" property given under "Snap to columns" property (which allows number value) based on the ScreenSize:

Documentation: Screen sizes and breakpoints

You can simply use Parent.Size for "Columns" property given under "Snap to columns" property which will show 1 column for mobile devices, 4 columns for desktop as shown in above table OR you can build formula like below as per your requirements:

Example: Show 1 column layout for mobile devices & show 3 columns layout for all other device sizes.

If(ScreenName.Size = ScreenSize.Small, 1, 3)

Other references:

1. Create Responsive Power Apps from SharePoint list