Adalo Interfaces not adaptive?

[julianvcruz11]

I’m near complete on my application and began testing it on my Iphone 12 pro. The component layout is much different than the way I designed it in adalo.

Some of the issues include:

Bigger gaps of space in between components.
Nav Bar is way too low

Concerned this will be an issue across all the devices the application will be deployed on. Did I miss something when building my app? How can this issue be addressed?

[Jacob_Lange]

Very tedious alignment. It took me a while to get. Try to keep every as center as you can when building for mobile. This really helped when building mine

[dilon_perera]

Hi

And these tips and tricks will also help you.

Tutorial about how layouts works

Hi @rkeehan, Welcome to the club There is no comprehensive tutorial for this, as I know. Unfortunately, one needs to find the best working layout with trial and error. There are some hints and observations which I’ve made: to preserve the screen elements’ proportions and locations, you can use rectangles as a “containers”, where you put the other UI elements. Don’t forget to move these rectangles “to the bottom” of the screen (left pane → Screens → Components), so that other elements …

Layout issues from design to preview

UI layouts can be very tricky to get right. Indeed using a box (rectangle shape) can act very well as a container when used as a group. Some other tips… Try to make elements align as much as possible. By top edge, bottom edge or centered. [image] Make sure components are the same length can help too. [image] Making elements “touch” can also help with alignment issues. [image] Unfortunately there are no strict rules for this to always make it work, sometimes it just takes a bit of trial …

Thank you