I have been working on the layout of my app, but every time I go to preview it looks completely messed up. I have tried some solutions I’ve read on the forum (fixing stuff to the top, trying to use the layout tools, etc.), but nothing has worked so far. I even tried playing with the dimensions of the screen, but nothing.
This is how it’s supposed to look like:
This is how it looks on preview:
How can I solve this?
Thanks a lot.
Have you checked if any of the components is in a fixed position that may be causing this?
I don’t think that’s the issue… I’ve moved the components around, but this problem still persists. How would you check whether the position in which it’s fixed is causing the problem?
You may be seeing it correctly in the Editor because it’s not adapting to the actual screen size, but you may have fixed the position of certain elements that, when in a real screen or in the Previewer, end up on top of non-fixed components that have moved to adapt to the screen of the device
Hmmm, I think it worked. I fixed everything instead of letting it adjust to screen… I’m just concerned it will look poorly on different sized screens. Is there any way to have it keep the same layout while letting it adjust to screen size? Also, what are the dimensions Adalo takes into account for it’s preview?
Thanks again!
If your goal is to have every one of those elements visible to the user without needing to scroll, you need to make sure to put them in a position and size where regardless of the screen size they open it in, they will show.
This means leaving enough blank space, so I’d suggest:
This way, even if the screen is smaller, you’ll have enough space between what is fixed at the bottom and what is fixed at the top to prevent them from overlapping.
