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

**URL:** <https://forum.adalo.com/t/adalo2-0-causes-display-discrepancies-between-web-preview-and-native-app/41679>\
**Category:** Design\
**Created:** [August 30, 2023, 11:02am UTC](https://forum.adalo.com/t/adalo2-0-causes-display-discrepancies-between-web-preview-and-native-app/41679 "2023-08-30T11:02:12Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Yumi](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/yumi/32/30750_2.png) [@Yumi](https://forum.adalo.com/u/Yumi)\
**Post date:** [August 30, 2023, 11:02am UTC](https://forum.adalo.com/t/adalo2-0-causes-display-discrepancies-between-web-preview-and-native-app/41679/1 "2023-08-30T11:02:12Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/3X/1/b/1bffecd02e44466fd18ef3db1ca7c80e28a63c63.png)

Native app(Android)

 ![Screenshot_20230830-194737](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/3X/b/e/bed24a734fe02792b619e2a319697bfabd6ad0f7.png)  
=\>There is a gap in the masonry display.

ex2  
Web preview

 ![image](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/3X/8/0/80f3ae128e16d7f51b6a89fc78b41d9569029a07.jpeg)

Native app(Android)

 ![Screenshot_20230830-195637](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/3X/3/f/3fc7da04a1f3da3ab99640d8b235ba8e565351d9.png)  
=\>Grouped text and background animation (Lottie) are misaligned.

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

Thank you,  
Yumi

---

<div class="post-metadata">

**Author:** ![axme](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/axme/32/21594_2.png) [@axme](https://forum.adalo.com/u/axme)\
**Post date:** [August 30, 2023, 4:22pm UTC](https://forum.adalo.com/t/adalo2-0-causes-display-discrepancies-between-web-preview-and-native-app/41679/2 "2023-08-30T16:22:15Z")

</div>

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:

 ![Screenshot 2023-08-30 at 12.21.12 PM](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/3X/0/d/0d6feb5e7797712d152941a48095924bcb38ded7.png)

it should be like this:

 ![Screenshot 2023-08-30 at 12.21.19 PM](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/3X/3/b/3bb693bec2538f088d3cb0cfb05945e27631bba4.png)

---

<div class="post-metadata">

**Author:** ![Yumi](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/yumi/32/30750_2.png) [@Yumi](https://forum.adalo.com/u/Yumi)\
**Post date:** [August 30, 2023, 5:18pm UTC](https://forum.adalo.com/t/adalo2-0-causes-display-discrepancies-between-web-preview-and-native-app/41679/3 "2023-08-30T17:18:49Z")

</div>

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.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/3X/1/7/17bc6772b4f5cf6bbf9e768eb8e8c36c23b89b8c.png)

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

 ![image](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/3X/5/a/5abd7a1bf8bf5ecd1b744ae284e21f8ae0ee2327.png)

Native app(android)

 ![Screenshot_20230830-195637](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/3X/3/f/3fc7da04a1f3da3ab99640d8b235ba8e565351d9.png)

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!

---

<div class="post-metadata">

**Author:** ![axme](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/axme/32/21594_2.png) [@axme](https://forum.adalo.com/u/axme)\
**Post date:** [August 30, 2023, 6:05pm UTC](https://forum.adalo.com/t/adalo2-0-causes-display-discrepancies-between-web-preview-and-native-app/41679/4 "2023-08-30T18:05:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Yumi](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/yumi/32/30750_2.png) [@Yumi](https://forum.adalo.com/u/Yumi)\
**Post date:** [August 31, 2023, 2:12am UTC](https://forum.adalo.com/t/adalo2-0-causes-display-discrepancies-between-web-preview-and-native-app/41679/5 "2023-08-31T02:12:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Yumi](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/yumi/32/30750_2.png) [@Yumi](https://forum.adalo.com/u/Yumi)\
**Post date:** [August 31, 2023, 8:20am UTC](https://forum.adalo.com/t/adalo2-0-causes-display-discrepancies-between-web-preview-and-native-app/41679/6 "2023-08-31T08:20:33Z")

</div>

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!
