How do I shrink this UI because I tested it on phones it was nearly covering the entire screen.
2 Likes
I assume you’re using offset and not Scale for sizing your elements?
Offset basically sizes a UI based on pixels, while Scale sizes your elements based on the percentage of your screen.
Scaling your UIs ensures that your elements will fit on the screen regardless of the screen size.
Here’s a 500x500 pixel Frame on a bigger screen vs. mobile:
Now here’s the same 500x500 pixel Frame but with SCALING:
To scale your UI, look at the Scale property in the Size of the element:
The size is relative to the parent element. the ScreenGui represents the viewport size of your screen, so creating a Frame INSIDE of the ScreenGui with the X Scale of 1 (1 == 100%, 0.9 = 90%, etc.) will make the Frame stretch to from the left of your screen to the right:
and vice versa with the Y Scale
I hope this cleared some stuff up!!
2 Likes
This is what I see
I’m sorry if I’m a bit unprofessional when it comes to this stuff I really don’t know how UI’s works.
maybe this plugin could help?
1 Like
I’ll try to thank you so much, I’ll see if this works.
idk what happened, this didn’t happen to me when I am using the plugin.
did you scaled the size or position?
Size Scale I even tried adding constraint feature.
I did that but the position got messed up 
like when I tested the mobile screens the ui would go on top but it fits but its on top
Have you applied the scale to ALL elements in your UI? If you only applied it to some, they might overlap eachother because some still use offset.
I did do that one by one too just to make sure it worked.
Could you send the screenshots of the current UI size? Are you sure it’s fully scaled and not offset?
Use exclusively scale. This makes UIs scale depending on the size of the screen. For example if you used 0.2 scale it takes up 20% of the screen on all devices. No matter the size
Click on the gui and click on unit in plugin and in the position tab select scale same with the size tab, dont use offset
What do you mean by “exclusively scale” is that a plugin name?
That means don’t use any Offset values in any of the UI elements. You have to go through each Size property and each Position property of each textlabel and each imagelabel, etc. and get rid of all Offset values and only use the scale values.
{position,offset} all offset value should be zero when you’re done.
This stuff is SO tedious and why I hate making GUI’s.
Exclusively scale as opposed to using offset. Scale is the first and third number in the size option. Offset is the 2nd and 4th one. I like to use a scale of 1,0,1,0 for signs as that puts the text directly in the center for example. 1,0,1,0 means that the width and height will take up 100% of the sign’s space. This principal applies to guis as well but this is an example. I recommend maybe 0.08 or 0.1 for gui scale as it’s based off the object’s parent. (If you put a GUI in a GUI it will take up that % of the guis space)
local uis = game:GetService("UserInputService")
if uis.TouchEnable then
--change frame size here
end