How can i make this GUI look the same on all devices?

[HazzyMattyThing (Bungar)]

I want this GUI to look the same on all devices, but the text changes scale and some UI elements become missaligned

PC:

Mobile:

[FroDev1002 (FroDev)]

So every UI element has a size property, of which has scale and offset properties.
an example of what each does:

Scale and Offset, hopes this helps

Hello! There are way to many posts of people who want to make their UI scale correctly on all devices, but just dont understand how to do it, so I thought I’d make this post to compile all the info I can get! Now before we talk about scale and offset, lets talk about where they are used. Scale and offset are used inside of something we call a UDim2. UDim2’s are similar to a vector2, except they have 4 arguments, what are these arguments you ask? Example: {ScaleX,OffsetX,ScaleY,OffsetY} Udi…

---

Now a lot of people would say just use scale and not offset, but when it comes to UI fitting devices it starts to get a lot more complicated, as I would recommend making different version for different devices due to different screen sizes.

But if you dont feel like doing that now, the most you can do is start using TextSizeConstraints, and scale instead of offset to make it the same for all devices!

Hope this helps!

---

Also unrelated, but your UI looks really good! Nice work :D

[HazzyMattyThing (Bungar)]

thanks about the last thing, Im using scale, on all of the ui elements. My question is how do i get the text to stay the right size? ive tried using TextSizeContraints but im not sure if im using them right because i couldnt get them to do anything. Could you help with that?

[FroDev1002 (FroDev)]

Oh!

Ok so in order for this to work, you’re obviously going to need the TextSizeConstraint as you mentioned, set the max and min sizes and then all you need to do is set the TextScaled property of the TextLabel (or button, or box, etc) to true.

Now it should automatically scale!
If the TextSizeConstraint doesnt seem like its working you can try resetting studio, as I’ve noticed sometimes it just doesnt work for some reason

---

Hope this helps :D

[HazzyMattyThing (Bungar)]

alright, i only messed with them once, guess studio just wasnt having it at that time and i thought i was doing something wrong. Ill try this and update you on it

[HazzyMattyThing (Bungar)]

I think im doing something wrong because the text is still getting larger on mobile

[y8ly8l (farzad)]

you can try to make the Y size smaller so that it fits completely in from top to bottom and leave some space from the sides and it should work ( i recommend text scaled + scale size )