Adalo2.0 causes display discrepancies between web preview and Native app

[Yumi]

Hi! Adalo Master,

I am currently creating an app in Adalo 2.0 and am registering a native app in the store to check its operation before publishing.

Of course the display is the same on the Adalo edit screen and on the web preview, but on the native app, the display is slightly off.

ex1
Web preview

Native app(Android)

=>There is a gap in the masonry display.

ex2
Web preview

Native app(Android)

=>Grouped text and background animation (Lottie) are misaligned.

Please help if you have a solution to avoid these display discrepancies.

Thank you,
Yumi

[axme]

i had the same issue transferring from Legacy to 2.0. did you make sure that the header is completely inside of the editor?

it should NOT be like this:

it should be like this:

[Yumi]

Hi axme,

Partially yes, partially no.

The following capture (ex2 of the first post) is slightly off the screen due to the large margins of the lottie.

On the other hand, ex1 of the first post) is completely within the screen.

Also for example, “UserName” and “NabejanID” are perfectly close together in the following capture, but there is a gap in the Native app.The same situation is happening a lot on other screens.

Edit screen

Native app(android)

Would it be less impactful if we create a rectangle that divides the screen and create within that rectangle, perhaps?

Besides addressing the headers, was there anything else you implemented?

Thank you!

[axme]

is every text or other element inside a rectangle?
For responsive to work properly, you need to put them in the rectangle. rectangles in 2.0 are like groups in the old adalo.

So try putting everything that’s not correct inside a rectangle and let me know if it works

[Yumi]

Thank you, I will try it today! I’ll share it with you once I confirm it works.

[Yumi]

When I put it in a rectangle, some of the text displayed well, but it did not solve the automatic widening of the space between closely spaced text.

So, I changed the specified font back to Standard System font as a trial, and this solved the problem!

If you are having trouble with this, please give it a try.

@axme Thanks for the suggestion!