Apps looks different in web, companion and app and margin is not working on layout

[sketch]

Hello everyone, i have been having a few issue lately with designing my app.
The apps looks so different on all platforms, take a look below:

web:

App:

Companion:

This should not happen especially on my phone somehow the companion looks better even tho the app has access to a bigger screen.

Secondly i have also noticed that margins don’t seem to work.

As you can see i have set the bottom margins but the layout items are still overlapping each other, also in the app it seems that they do not have any margins at all or too much margins.

EDIT: turns out margin works unless you set the height or width to anything other than fill/fit contents

Is there any way i can temporarily solve this?

Thanks

[ioannis]

Hello @sketch
Thank you for sharing all the details and screenshots.
I tried to replicate the issue and only happened when I cloned a rich text component.
Could you please try to use a “Label”?

[sketch]

Hello @ioannis thanks for your reply.
the margin issue is sort of solved with it, but it seems that the first one still doesn’t have margins.
Web:

Companion:

Please note: i ran out of apk downloads so im unable to test if an apk looks the same or different.

[sketch]

Hi @ioannis Sorry if im reopening the topic again but i seem to have figured out a part of the issue, browser headers and desktop app bars.
Basically i figured out that the sizing issue on the web is caused because the calculating of the sizing uses the full screen size, this works perfectly on mobile(If statusbar is turned off) but on browsers that have a header or on desktop with the app bar this doesn’t and the user has to go into fullscreen to fix it.

Solution: on the web i think it’s better to use the innerHeight/innerWidth of the window rather than the screen size, this creates the correct sizing on the web for the elements.

Thanks