Why are my UI's squishing together

[rafferty05 (RAFFFAAA)]

My gui looks good when in studio but as soon as i go to test it they squish together.
In studio:

In game:

When I click on them, it says they are in the same position, even though they obviously aren’t and one of them seems to shrink.

[charlestonial (bag)]

You’re probably making the size and position of your UIs using offset instead of scale, which doesn’t size them or position them appropriately based off of the size of a user’s screen. I don’t know much about GUI design, but I’d try reading this:

@Forummer

You should only ever size/position GuiObject instances according to scale, this is so that they render in the same positions/sizes as a ratio/percentage of the resolution/dimensions of the native device. For example.

Frame.Size= UDim2.new(0, 100, 0, 100) --this frame will always size at 100 pixels by 100 pixels for every device, which will result in it looking large on smaller devices and small on larger devices
Frame.Size = UDim2.new(0.1, 0, 0.1, 0) --this frame will always size at 10% of the devices screen width/x-dimension by 10% of the devices screen length/y-dimension, which will result in the frame appearing as a similar size respective to the devices size for all devices (aspect ratios could still cause some slight imbalance)

[rafferty05 (RAFFFAAA)]

Thank you but I think I’m doing that:

Might be wrong tho

[benpinpop (Ben)]

I’d particularly recommend #help-and-feedback:art-design-support for asking for help for GUI design.

Related to what @charlestonial said, you can use plugins to change things from offset to scale too, like AutoScale.

[charlestonial (bag)]

Do you have some sort of AspectRatioConstraint inside of the buttons that are different from eachother, that could be making them size differently?

[rafferty05 (RAFFFAAA)]

They are all 2.4, so I don’t think thats the issue either

[charlestonial (bag)]

Can you show us where the buttons are in the explorer tab? Just to see their parents, etc

[rafferty05 (RAFFFAAA)]

[charlestonial (bag)]

The button will scale differently depending on the size of what it’s parented to, so if the “Content” frame it’s parented to are different sizes, the button will be a different size, and the same for “InvButtonDisplay” vs. “BackToMenu”. Is the “Button” the actual grey part, or is it one of the frames?

[rafferty05 (RAFFFAAA)]

The content is half the button and the back to menu frame is the other half of the button. By the way Ive done some more testing and its definatly to do with the size of the screen, they squish together or go far apart depending on the ratio of the screen

Edit: All of the frames under the parent frame are just set to {1,0,1,0} so they should just be the same size

[charlestonial (bag)]

Try putting an aspect constraint in only the first frame of each button, and see what happens. Sorry if this is taking forever, I’m not the best at UI stuff.

[rafferty05 (RAFFFAAA)]

Thats made it much better, thank you very much for your help, in terms of the positioning looking better I think I will just have to put them under the same parent frame so that the distance between the buttons doesnt change that much