How to fix this weird UI?

Hello, developers,

Since I’m mainly a script writer, I don’t know how to work with UI and such UI related stuff.
I’ve tried to make a UI, but in game, in studio and in device test it looks completely different and scales weirdly. Do you know how to fix it?

roblox studio:

device view:


And here’s the UI in the actual game (on a monitor of course):

How do I achieve the SAME look as in roblox studio? I’ve already tried scaling it properly, putting in UIAspectRatioConstraint, but nothing changed…

Thank you!

4 Likes

Hey there, I am recently getting back into U.I design so I want to try and recommend some things, 1st of all when making the U.I did you scale it normal or make the size of it 0,00 to 0,00?

1 Like

Hey
sorry for the late reply - I made it 0.15, 0, 0.15. 0.

1 Like

No problem i was out doing stuff anyway, to clear up any future misunderstandings are you trying to make the U.I exact same height and position for each device? Or just the same position? What I do to have the G.U.I in the same position to each device is i make a screengui then add a frame, after that go to properties of the frame. And the size should automaticaly be 200 by 200 i believe what you want to do then is make the 200 by 200 into 0,0 then afterwards. You should be able to scale it with the mouse as normal therefor leaving it in exact same positioning across each device, if this isnt your problem i do appoligiese and I will try to help you.

Do you mind showing me the layout of the G.U.I in the explorer?

1 Like

You can’t really ever make UI look the same as in Studio using the Scale property of Size. Using Offset instead should give the desired result.

For example:

UDim2.new(0.5, 0, 0.5, 0)

will look different depending on my screen size.

But:

UDim2.new(0, 100, 0, 100)

will look the same on every screen size.

1 Like

yea of course, here it is:

1 Like

May I see all properties inside UIListLayout I am trying to recreate this in studio to see if there is a possible workaround but everything i have done hasnt lead to me being able to have a basic layout like yours for instance:

1 Like

here it is:


1 Like


This seems to fix it for the pc version, but for mobile is bad, but I think thats just me rushing the scaling try putting “SpaceEvenly” on in Alignment under HorizontalFlex in UIListLayout.

I hope this fixes your problem if not let us know! Dont worry about the text titles above they arent in the main Frame

1 Like

it still scales wierdly and kinda destroy the whole look on monitor:

1 Like

I am running out of ideas. Did you do what Axmos said?

yeah, I’ve tried that and it’s still the same - I’ve even tried putting in different numbers, but still nothing.

1 Like

I think I’ll stick with what I have now, I feel like the more I change it the more broken it gets lol

1 Like

Yeah, there could be 1 way by removing U.I list layout maybe but i get having it exactly listed and its easier to add new stuff onto it. Sorry i was unable to help

You used offset for your padding, try use scaled and see if it makes a difference