UI Design Scaling Problem

So, I’m having a problem with the UI and I want them to be scaled accurately in the same postion no matter what resolution or device and I can’t seem to figure out how to fix it.

Normally looks like this:

On Mobile:

Any solution would be amazing, thank you.

It looks like you’re using Offset to set the size of the text. You’ll need to switch to Scale.

In a UDim2, there are two different size types: Offset and Scale.
Offset is a specific amount of pixels.
Scale is a float determining the size based on screen size.

Your .Size property may appear like this in the properties window: {0, 100},{0, 200}
The separate {}s are the X and Y axes, and the two numbers inside each of them are the Offset and Scale values.
In this case, 0, 100 is the size of the object on the X-axis. The 0 is the scale, and the 100 is the offset.

An easy way to speed up the process of switching from offset to scale (and vice-versa) is using this plugin.

3 Likes

This helps a lot, I might use this as a reference when making GUIs, also good job on the explanation!

There is a device icon that shows you what the UI looks like for both devices. I use and compare computer vs mobile to see if it looks good for both. I scale {1,0,1,0} though.

1 Like

Thanks a lot for the reply, it’d helped me scale it right and it’s all good now. I have to say that the plugin is actually really useful. Once again, thank you.