Positioning UI from smallest to largest device


iPad 2

iPhone 4s

As you can see, the top bars UI looks perfect with the PC, however on mobile it becomes incredibly squashed. I don’t really wanna have to create seperate positions/sizes for each device. I’m using scaling for all the buttons in the top bar, but the top bar itself is offset (36 pixels, as that’s the size of Roblox’s default top bar)

What can I do to get around this? The Mobile does not allow much space at the top of the screen, as Roblox’s default buttons take up majority of this area

What you can instead do is separate it into two parts, one GUI setup for mobile and the other for desktops and such, that way, you don’t have to do a GUI setup for each individual device and allows for easier use on different screens, (Mobile players would love a GUI setup for only mobile, i think…)


If you want a more simple fix to that though, you could try adding a sort of extension to the topbar like this :

As you can see, for one of my games, I added a sort of extension to add the extra text instead of trying to cram it in. (This will mostly depend on the style of the game your going for though, not recommended if it doesn’t suit the style of the game or gets in the way of some elements.)

1 Like

You don’t have much of a choice on mobile. You’re gonna have to create a separate part for the buttons which is not part of the top bar.

Have you tried using the device screen emulator? It will help with these kinds of situations.