Responsive app from Desktop to mobile and tablet

Like (0) Share

Report

Posted on 18 Dec 2024 13:50:01 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:

Mobile App

All responses (2)

Answers (0)

ronaldwalcott 3,653 on 19 Dec 2024 at 05:24:23

Like (0)

Report

Responsive app from Desktop to mobile and tablet

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.
SaiRT14 1,966 Super User 2025 Season 1 on 18 Dec 2024 at 21:19:01

Like (0)

Report

Responsive app from Desktop to mobile and tablet

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.