UI spacing is messed up on different devices

[AAD232007 (AAD)]

Hello. I’ve recently got back into developing and I’m revamping my current game’s UI by creating it in an external app and importing it, and everything seems to work except for the fact that the UI spaces weirdly when viewed through a mobile device. I have changed the size to Scale using a plugin, and also added an aspect ratio constraint, but it still places unevenly.

Here is how it is intended to look (and how it looks on laptops):

Here is how it looks when viewed using the test from a 7th gen Ipad:

Does anyone know how I could fix this?

Edit: I just tried to look at the UI with my output window open, and the spacing is wrong there too. Here is how it looks with the output open:

[Samuelpc180 (Sam)]

Can you please send me a .rbxl file only containing those GUI ? I’m not sure how to explain it, so I will fix it and send the fixed version. Then, I think you will kinda get an idea of how it works. If you still don’t understand after I send the fixed version, I will try my best to explain it

[AAD232007 (AAD)]

Sorry, how would that work? Should I just send the image buttons without their scripts, or do you need scripts included?

[Samuelpc180 (Sam)]

If you want to remove the scripts, you can remove them. Doesn’t really matter

[supergeorge2007 (LocVide)]

Just make sure you’ve set the sizes of all your frames with scale and not offset

[Samuelpc180 (Sam)]

thats not the problem here, its the positioning stuff

[AAD232007 (AAD)]

I’m a little confused how I’d go about exporting it, so here are some screenshots for just the hide UI button.

Sorry if this isn’t what you needed, but please let me know if I can send anything else.

[AAD232007 (AAD)]

As I’ve said, I’ve used a plugin to change my UI from offset to scale, and then another plugin to add an aspect ratio, so the sizing problem is fixed.

[Samuelpc180 (Sam)]

can you create a new place, copy and paste the HideShowGui into the new place, save it as a file, and send it?

To save it as a file, on the top left of the screen, File > Save to File As...

[AAD232007 (AAD)]

Test GUI.rbxl (50.5 KB)
Sorry it took so long, but here it is.

[Samuelpc180 (Sam)]

Fixed GUI.rbxl (52.1 KB)
Here it is, the fixed version

The frame Main here is what makes everything fixed in place

[AAD232007 (AAD)]

Wow, that works perfectly! So I need to have them in a frame for them to stay together? Also, could you walk me through how you configured the frame (eg. its size, aspect ratio, etc.) just because it’ll be useful to me in the future and for the rest of my UI. Thanks so much for the help though

[BilonGamer (Bilon)]

If I recall correctly, using a frame allows you to put all of the scaling behavior in the frame itself which allows the spacing between its members to be consistent. Not using it means that they’re all handled separately, and spacing might not be consistent.

[Samuelpc180 (Sam)]

I hope this makes somewhat sense

[AAD232007 (AAD)]

Thanks a lot, this really helped.