Layout issues from design to preview

[dreamjobs]

Hi everyone,

I’m having issues with layout and was wondering if there is a simple fix that I’m not getting…

I’m on Chrome btw:

For whatever reason, what I design on the app builder isn’t what I’m seeing in preview. If there were containers, it would be much easier.

Here is what I see in the app builder:

I read a tip that using a block might help which is the grey in the background.

Here is what I get on the preview:

When I add one element block at a time, I have no issues until the last block, which seems to screw up the first (larger) block.

Any thoughts?

Thanks
Chad

[anon78309838]

UI layouts can be very tricky to get right.

Indeed using a box (rectangle shape) can act very well as a container when used as a group.

Some other tips…

Try to make elements align as much as possible. By top edge, bottom edge or centered.

Make sure components are the same length can help too.

Making elements “touch” can also help with alignment issues.

Unfortunately there are no strict rules for this to always make it work, sometimes it just takes a bit of trial and error and slowly you will start to realise the patterns that generally tend to work properly.