Issue with size and position on different systems/monitors

Hello, I’ve been making a dialogue UI to start scripting but I ran into a problem that I’ve been going through for a LONG time.

Issue:
The UI isnt the same for all monitors/mobiles… etc, the positions and the sizing changes even though im using scaling for both position and size and I’m even using a plugin made to fix this problem and make it easier but even thought the UI still looks odd on mobile and the positions arent the same

UI on my PC monitor:
image

UI on the mobile emulator:
image

If you have extra questions I made the ui an .rbxm file so you guys can mess around with it all you want.

The UI:
UI.rbxm (5.0 KB)

Any help is appreciated!

It depends on which axis you are using to scale and position things, for example I think u are using XX so if you changed to YY you would have different results but for I’ve seen the only real solution is making a separate UI for PC or Mobile, so that you can adjust it relative on what looks best for the ratio of the screen.
This is especially true with iPads as they have a completely different ratio for the screen which makes UI look entirely different.

I’ve found that when multiple parts of your UI need to be linked, either by size or position, the best way that I found to do it (note that it may not be best practice, I’m not a UI designer, I’m a scripter by heart) is to parent one frame into another. That way, all size/position dependencies come easily for free.

In the example you gave, I parented “Repsonses” into “Main” and adjusted the size and position until it felt fine.

Regular:
large

Emulator:
small

Like I said, this may be bad practice, but I found that it works, and I feel that that’s what matters.
UI.rbxm (5.0 KB)

1 Like