Making a GUI perfect on any screen

I have made a GUI for my game. However, when I test it on mobile it’s WAYYY to big. I’m not the best at GUIs and never been into them so how can I make it so its the perfect size on any device?


Are you using Scale or Offset? Offset is exact pixel measurements and so will be too big on some devices, too small on others. Scale is relative, so it’ll always be the same relative size across screens.

I hardly use GUIs so I don’t know what you’re talking about

1 Like

How are you setting the sizes of your GUIs?

I just use this for creating and scaling image

The UI editor sizes in offset, last I remember. You’ll need to manually set the size property and use scale.

Here’s a tutorial on basic usage of the UI system:


Wasn’t there a plug-in that converts offset to scale and automatically adds UI constraints to the frames?


That doesn’t help

Don’t know

In what way does it not help? It’s a tutorial meant for absolute beginners.

1 Like

It’s too confusing for me

About this plug-in to be exact?


Can you post pictures that show how it’s too big?
There’s multiple ways UI can be too big that can be caused by different things.

Perhaps he’s more of a visual or hands on person? People learn in different ways so written tutorials isn’t beneficial to everyone.

UI | Documentation - Roblox Creator Hub If the DevFourm tutorials are not your thing

Maybe using an example, with a video tutorial, such as

(Find your learning style and find something around that to learn)


If the size is {0, 80},{0, 50} it’s 80 pixels wide and 50 pixels tall. If the size is {0.5,0},{0.2,0} it’s 50% of the screen width and 20% of the screen height. Play with the first number and leave the second one at zero if you want it to be the same for everyone.


Position works the same way, but keep in mind that the top left corner of the object is where its position is.

AnchorPoint helps alot also if you want the gui perfectly centered or on the right side of the screen. It works in Scale for both values.

1 Like

To add on to that, Chrythm’s ‘top left corner’

is what AnchorPoint modifies. By changing the AnchorPoint you can change that ‘top left corner’ to the ‘bottom right corner’ or the ‘top center’ and so on.

Many people will tell you to use scaling properties of ui to achieve the same UI for pc and mobile. I would caution you against it. Mobile has entirely different needs and constraints compared to pc. You cant touch the screen on an xbox, you can reach ur hand across the screen on a phone, mice can’t do pinpoint accuracy like a finger can.

Detect the device and issue the player the corresponding, custom built ui tailored to the device.