# App Preview Different From Actual App

**URL:** <https://forum.adalo.com/t/app-preview-different-from-actual-app/25982>\
**Category:** Get Help\
**Created:** [April 16, 2022, 4:13am UTC](https://forum.adalo.com/t/app-preview-different-from-actual-app/25982 "2022-04-16T04:13:55Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![aryan](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/aryan/32/15087_2.png) [@aryan](https://forum.adalo.com/u/aryan)\
**Post date:** [April 16, 2022, 4:13am UTC](https://forum.adalo.com/t/app-preview-different-from-actual-app/25982/1 "2022-04-16T04:13:55Z")

</div>

Hi, when I click on preview my app is displayed perfectly but when I test it on actual devices (different ones) the look and layout changes.

For eg. If i’ve joined 3 components to make a square, it looks like a rectangle or worse on the actual device. Even lists don’t stay properly

What can I do to fix this?

---

<div class="post-metadata">

**Author:** ![charleshope](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/charleshope/32/25088_2.png) [@charleshope](https://forum.adalo.com/u/charleshope)\
**Post date:** [April 16, 2022, 6:42am UTC](https://forum.adalo.com/t/app-preview-different-from-actual-app/25982/2 "2022-04-16T06:42:43Z")

</div>

Hi @aryan

This is a very common topic with many posts around it.

I suggest doing a search for the other topics and reading the recommendations provided there, which are usually the same ones each time.

---

<div class="post-metadata">

**Author:** ![aryan](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/aryan/32/15087_2.png) [@aryan](https://forum.adalo.com/u/aryan)\
**Post date:** [April 16, 2022, 11:22am UTC](https://forum.adalo.com/t/app-preview-different-from-actual-app/25982/3 "2022-04-16T11:22:18Z")

</div>

> [@charleshope](#):
>
> and readin

Thanks Charles! I’m not sure what the issue is identified as so what should I search up?

---

<div class="post-metadata">

**Author:** ![Flawless](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/flawless/32/20131_2.png) [@Flawless](https://forum.adalo.com/u/Flawless)\
**Post date:** [April 16, 2022, 2:33pm UTC](https://forum.adalo.com/t/app-preview-different-from-actual-app/25982/4 "2022-04-16T14:33:51Z")

</div>

Hey there @aryan

Can you provide screenshots of what you see in the editor, what you see in the previewer, and what you see in the native builds?

Then, screenshot how you have the lists and groups within the screens.

In most cases on this subject, the solution is usually just to add some rectangles as spacers/backgrounds of sections to keep things aligned well.

Similar to these, perhaps?

> [@Margins & Alignments for Custom Forms](https://forum.adalo.com/t/margins-alignments-for-custom-forms/25160/2):
>
> Hey there @Sheun Use rectangles as spacers. You can set the exact amount of pixels between each element. Like here, I have 20px between these 2 options:

> [@Visibility rules - Can't get icons to align](https://forum.adalo.com/t/visibility-rules-cant-get-icons-to-align/23097/2):
>
> All you gotta do is put a rectangle behind all of the icons and group them together. The rectangle should be the only item in the group that does not have visibility rules. Like this, but instead of having “Groups”, you’ll have icons

---

<div class="post-metadata">

**Author:** ![aryan](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/aryan/32/15087_2.png) [@aryan](https://forum.adalo.com/u/aryan)\
**Post date:** [April 17, 2022, 7:18am UTC](https://forum.adalo.com/t/app-preview-different-from-actual-app/25982/5 "2022-04-17T07:18:28Z")

</div>

Attached screenshots below show what it should look like (adalo preview) v/s what it actually looks like:

 ![Screenshot 2022-04-17 at 12.43.15 PM](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/3X/3/0/309681ef4eb5a1849d8b8cba52d90e36b3ef53c6.jpeg)

Issue: Image of the girl in the box and text of the categories

 ![WhatsApp Image 2022-04-17 at 12.41.08 PM](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/3X/b/9/b9431af2817178a5f8831b22ebfa7d00c891ebf7.jpeg)

–

 ![Screenshot 2022-04-17 at 12.44.21 PM](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/3X/3/7/37294471213b94bb057bb1a7bd9cf44b498fe206.jpeg)

Issue: KYC, ORDERS, SALES BOX & BUTTONS TEXT / SIZE

 ![WhatsApp Image 2022-04-17 at 12.41.09 PM](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/3X/7/0/708157ca0fe3f027be52643286b5b1fe9488396b.jpeg)

And a few more similar issue like these occur. This is mostly happening only on android

---

<div class="post-metadata">

**Author:** ![Flawless](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/flawless/32/20131_2.png) [@Flawless](https://forum.adalo.com/u/Flawless)\
**Post date:** [April 17, 2022, 12:38pm UTC](https://forum.adalo.com/t/app-preview-different-from-actual-app/25982/6 "2022-04-17T12:38:48Z")

</div>

In regards to the first screenshot, ensure that you do not have your text overlapping the image.

 ![download-1](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/3X/f/8/f81553e5a2e4c0646b671112cc7c789060ec7d5a.png)

 ![download-2](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/3X/2/f/2f428cb2089ee570f2384c770361d5447839a37e.png)

Keep in mind that different devices of different sizes may cause components to be closer together.

I’d recommend slightly smaller font sizes and less padding to try to allocate for the different screen sizes.

---

<div class="post-metadata">

**Author:** ![aryan](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/aryan/32/15087_2.png) [@aryan](https://forum.adalo.com/u/aryan)\
**Post date:** [April 17, 2022, 5:31pm UTC](https://forum.adalo.com/t/app-preview-different-from-actual-app/25982/7 "2022-04-17T17:31:54Z")

</div>

Thanks so much for the response! I’ll try these things out

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/system/32/40401_2.png) [@system](https://forum.adalo.com/u/system)\
**Post date:** [April 27, 2022, 5:32pm UTC](https://forum.adalo.com/t/app-preview-different-from-actual-app/25982/8 "2022-04-27T17:32:51Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
