Unanswered

Responsive app from Desktop to mobile and tablet

(0) Share

Report

Posted on by VR-18121205-0

I have a power app designed in desktop mode.

I'm trying to make it responsive to it looks good on a mobile device and tab.

I have created the app using 20 fields and 20 labels and created in a horizontal, which is 10 fields in left side and 10 fields in right side and I want my app to be in vertically aligned in mobile and tab

My app is already designed for desktop so how can i make it fit for mobile and tab?

Categories:

Building Power Apps

I have the same question (0)

All responses (2)

Answers (0)

SaiRT14 1,990 Super User 2025 Season 2 on at

Like (0)

Report

Open your app in Power Apps Studio. Go to the App Settings > Screen Size + Orientation. Enable the option "Scale to fit" and "Lock aspect ratio" to ensure the app scales based on the device.

Replace your current layout with a Vertical or Horizontal Container from the Insert > Layouts menu. Containers allow controls to automatically adjust their positions and sizes based on the screen size.

Use the App.Width property to detect the screen width and dynamically adjust the layout.

For the X and Y properties of your fields If(App.Width < 768, 0, Parent.Width / 2) // 0 for mobile/tablet, center for desktop
For the Width property - If(App.Width < 768, Parent.Width, Parent.Width / 2) // Full width for mobile/tablet

In the Visible property of the second container App.Width >= 768

Hope it should fix.

Was this reply helpful? Yes No
ronaldwalcott 3,847 Super User 2025 Season 2 on at

Like (0)

Report

Consider how the fields are related so that you can group them into some logical grouping for the mobile and tablet form factor. Just making it responsive so that fields wrap does not always create an efficient design for a mobile app. Consider the functionality of the app. Are users performing the same functionality on the desktop, mobile and tablet form factors? You could just add all the fields into a responsive container but you should concentrate on usage to create an efficient design. Some fields may not be necessary for the mobile app so could set them to a default value and so forth.

If you provide more details on functionality then you could get more helpful feedback.

Was this reply helpful? Yes No