We want to build a responsive interface for the user to interact with the storefront and we have chosen to develop a Power Apps Canvas app. PixelStreet is the name of our interface for trading resources and goods, as well as interacting with an NPC (Non-player character), an agent, for information, building structures in Minecraft and help with crafting items. In order to achieve an responsive app, we first have to enable the responsive layout on Settings – Display – App layout and switch from Fixed to Responsive.

This makes it possible for the screen in our app to expand and minimise depending on the users screen size. But how do we solve it with elements and components on the screen? Yes, we are using good principles for dynamically increasing width and height, and position components related to updating X and Y properties of elements depending on their Parent. In Power Apps Canvas Apps, we are able to select an element and adjust its Width and Height properties as shown below, in relation to the parent value. The element is then going to automatically scale to the screen size.

To adjust position of elements, we will dynamically update the X and Y values based on Parent Height and Width, and percentage, so that the item will place correctly and never fail in terms of being responsive.