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. @dilon_perera
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:
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).
