Shape and text grouping

Hi everyone
Maybe i missed something with components shapes and texts grouping.
How can i do so that a shape be fixed even if the text size change ?
I create an app , in preview , everything is fine , presenting like i do and i want . But when the app is published, there are so many distortion about the rectangles i used as backgrounds of the text .
Normally we have to see what we get . But not
Even when i used the Adalo 2.0 , i’m confronted with the same distortions.
Can someone help me?
Please provides me links for how to use shapes and texts groups in adalo.

See the images as illustration…

Hey @nouahenri,

Sometimes it is difficult to reach the perfect alignment. As native devices may have different screen resolutions, Adalo page engine must be able to adjust the components accordingly, so you may see the results which are different from a web preview.
There is no “magic pill” here - you have to adjust each component manually to make screen look “pixel perfect”.

A few advices which might be useful:

If you’d like to be sure that rectangles stay on the same “level” (in your case - “tous” and particulier / entreprise), you can check their sizes manually (open “Edit Styles” on the bottom left).
Also you can check components’ alignment by selecting several components - you will see yellow lines which show component boundaries. Here is an example:

Another hint: check how you set up the text labels. In the pictures above, “Hello World” looks aligned to center. However, in fact it is not:

And there is a very high chance that text label will look misaligned in the native app as screen widths may be different and therefore component alignment will change. The solution here would be to stretch the text label all the way to the borders of the rectangle and make text centered.

In regards to vertical alignment inside the element (e.g. icon and text label inside the box), it’s better to ensure that the distances from the top and bottom are equal (of course if you need vertical symmetry).

However, for pixel-perfect alignment you will have to spend some time experimenting with the elements on your screen. You can use invisible rectangles as containers and spacers to help to define element positions.

NB: the advices above are related to Mobile Legacy, but for new Responsive the approach is similar (you will also have to watch the layout settings).


Hi @Victor
Thanks you for your help and explanations.
I can 'otice that the distortions depend of the device .

1 Like

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