# Adalo screens; positioning and alignements

**URL:** <https://forum.adalo.com/t/adalo-screens-positioning-and-alignements/16854>\
**Category:** Design\
**Created:** [September 5, 2021, 12:51am UTC](https://forum.adalo.com/t/adalo-screens-positioning-and-alignements/16854 "2021-09-05T00:51:33Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![parksidecreator](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/parksidecreator/32/15737_2.png) [@parksidecreator](https://forum.adalo.com/u/parksidecreator)\
**Post date:** [September 5, 2021, 12:51am UTC](https://forum.adalo.com/t/adalo-screens-positioning-and-alignements/16854/1 "2021-09-05T00:51:33Z")

</div>

Hi, apologize for double"posting" but my matter is to me quite urgent, and it surprises me I seem to be the only one with the issue?

When a screen is created in the creator, on my app it is hard to get it to look as I’d like it to look. I thought it would adjust by itself according to screen size of the user, but for me it does not. My text boxes are together as they’re supposed to be, but totally out of place. See attachment for example, picture one shows how I want it to be, and how it appears in creator. Picture two shows how it does in fact appear on an iPhone 12 Pro screen.

 ![UNALIGNEMENT PCSCREEN](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/2X/0/0fc4d8242c5e03ad42b29448686a8b9a46df0502.png)  
 ![UNALIGNEMENT PHONESCREEN](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/2X/2/2b9bbb087bdc156ef1e502044ff6fced16d4cc0e.png)

---

<div class="post-metadata">

**Author:** ![Shunsuke](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/shunsuke/32/11175_2.png) [@Shunsuke](https://forum.adalo.com/u/Shunsuke)\
**Post date:** [September 5, 2021, 2:11am UTC](https://forum.adalo.com/t/adalo-screens-positioning-and-alignements/16854/2 "2021-09-05T02:11:44Z")

</div>

What component are you using to create the list at the top?

---

<div class="post-metadata">

**Author:** ![parksidecreator](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/parksidecreator/32/15737_2.png) [@parksidecreator](https://forum.adalo.com/u/parksidecreator)\
**Post date:** [September 5, 2021, 2:24am UTC](https://forum.adalo.com/t/adalo-screens-positioning-and-alignements/16854/3 "2021-09-05T02:24:28Z")

</div>

There’s a rectangle, on top of that an image-box and a text-box.

---

<div class="post-metadata">

**Author:** ![Shunsuke](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/shunsuke/32/11175_2.png) [@Shunsuke](https://forum.adalo.com/u/Shunsuke)\
**Post date:** [September 5, 2021, 2:33am UTC](https://forum.adalo.com/t/adalo-screens-positioning-and-alignements/16854/4 "2021-09-05T02:33:09Z")

</div>

Show me the Edit Styles settings for each component.

---

<div class="post-metadata">

**Author:** ![parksidecreator](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/parksidecreator/32/15737_2.png) [@parksidecreator](https://forum.adalo.com/u/parksidecreator)\
**Post date:** [September 5, 2021, 2:55am UTC](https://forum.adalo.com/t/adalo-screens-positioning-and-alignements/16854/5 "2021-09-05T02:55:38Z")

</div>

Nothing special about them as I can see, I have each rectangle, image and text-box grouped separately and the four groups have the same Edit Style settings.

![Screenshot 2021-09-05 at 04.54.34](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/2X/1/144be281bca1a141775267c1405cb6745a07fbb2.png)

---

<div class="post-metadata">

**Author:** ![parksidecreator](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/parksidecreator/32/15737_2.png) [@parksidecreator](https://forum.adalo.com/u/parksidecreator)\
**Post date:** [September 5, 2021, 2:56am UTC](https://forum.adalo.com/t/adalo-screens-positioning-and-alignements/16854/6 "2021-09-05T02:56:57Z")

</div>

And this is WITH invisible boxes in between.

 ![Screenshot 2021-09-05 at 04.56.21](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/2X/9/942c422384ef8b6c0360e2ed292b92de41e155e0.png)

---

<div class="post-metadata">

**Author:** ![Shunsuke](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/shunsuke/32/11175_2.png) [@Shunsuke](https://forum.adalo.com/u/Shunsuke)\
**Post date:** [September 5, 2021, 3:16am UTC](https://forum.adalo.com/t/adalo-screens-positioning-and-alignements/16854/7 "2021-09-05T03:16:21Z")

</div>

Instead of independent components, why not make a list?

---

<div class="post-metadata">

**Author:** ![Applicationspeciali](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/applicationspeciali/32/13027_2.png) [@Applicationspeciali](https://forum.adalo.com/u/Applicationspeciali)\
**Post date:** [September 5, 2021, 8:21am UTC](https://forum.adalo.com/t/adalo-screens-positioning-and-alignements/16854/8 "2021-09-05T08:21:24Z")

</div>

@parksidecreator  
First, put a box on the page and take your products into the empty box you placed. After selecting and grouping all of them with the mouse, press the “buttom” button and let me know.

---

<div class="post-metadata">

**Author:** ![parksidecreator](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/parksidecreator/32/15737_2.png) [@parksidecreator](https://forum.adalo.com/u/parksidecreator)\
**Post date:** [September 5, 2021, 11:45am UTC](https://forum.adalo.com/t/adalo-screens-positioning-and-alignements/16854/9 "2021-09-05T11:45:53Z")

</div>

In the bottom a box, and then on top of that box I put the self-made list?

---

<div class="post-metadata">

**Author:** ![parksidecreator](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/parksidecreator/32/15737_2.png) [@parksidecreator](https://forum.adalo.com/u/parksidecreator)\
**Post date:** [September 5, 2021, 11:47am UTC](https://forum.adalo.com/t/adalo-screens-positioning-and-alignements/16854/10 "2021-09-05T11:47:44Z")

</div>

I am now trying this, how do I get the list to link to what I want it to link to? In this case I want that when you press on an object in the list it takes you to a new page with more information about the object in the list. Like facebook, instagram, www…

---

<div class="post-metadata">

**Author:** ![Applicationspeciali](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/applicationspeciali/32/13027_2.png) [@Applicationspeciali](https://forum.adalo.com/u/Applicationspeciali)\
**Post date:** [September 5, 2021, 12:36pm UTC](https://forum.adalo.com/t/adalo-screens-positioning-and-alignements/16854/11 "2021-09-05T12:36:04Z")

</div>

annotate the objects in a different page and put a button under each object and link it to the pages where you have the object description

---

<div class="post-metadata">

**Author:** ![parksidecreator](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/parksidecreator/32/15737_2.png) [@parksidecreator](https://forum.adalo.com/u/parksidecreator)\
**Post date:** [September 5, 2021, 3:00pm UTC](https://forum.adalo.com/t/adalo-screens-positioning-and-alignements/16854/12 "2021-09-05T15:00:19Z")

</div>

@Applicationspeciali Are you describing how to connect information to a list or how to do the method you first mentioned with the box first, then the information. Confused.

---

<div class="post-metadata">

**Author:** ![parksidecreator](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/parksidecreator/32/15737_2.png) [@parksidecreator](https://forum.adalo.com/u/parksidecreator)\
**Post date:** [September 5, 2021, 3:45pm UTC](https://forum.adalo.com/t/adalo-screens-positioning-and-alignements/16854/13 "2021-09-05T15:45:46Z")

</div>

@Applicationspeciali@Shunsuke

I appreciate both of your time, I am now figuring it out through lists. Thank you.

---

<div class="post-metadata">

**Author:** ![parksidecreator](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/parksidecreator/32/15737_2.png) [@parksidecreator](https://forum.adalo.com/u/parksidecreator)\
**Post date:** [September 6, 2021, 12:49am UTC](https://forum.adalo.com/t/adalo-screens-positioning-and-alignements/16854/14 "2021-09-06T00:49:31Z")

</div>

Hi again,

here I tried to pull it off with a list. As you can see the disalignment still exists! Frustrating.  
(right picture is what creator shows - left picture is preview mode, my phone shows the same image)

Any tip?

 ![DISALIGNEMENT WITH LIST](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/2X/4/45c0e5ba1d2f87e649c454dc94fd4319b3277519.png)
