How do I make this gui work on mobile?

Hello, I’m trying to make a topbar gui and its going perfectly fine, except one thing:

The gui looks fine on pc or bigger screens:

But when you use a very small screen like for example on phone:

The guis start overlapping.
I have one idea on how I could fix it but I don’t know if this is efficient or not.

I could only show like 3 buttons at a time and have an arrow button on the left side and right side of the topbar which show up only if the screen is small enough that the guis start to overlap. And when you press buttons, you go to the next or previous page of the main buttons. But I have no idea how to detect if the screen is small enough.

Thanks for any help.

2 Likes

The reason, that, your GUI looks bigger on smaller screens is because you are using the Offset value to size the GUI. Try to use the Scale property instead of the Offset. The Scale property uses percent to size UI elements instead of pixels. If you use pixels the object will remain the same size regardless of the resolution of the device. The same applies to position. Hope this helps!

My guis use automatic sizing so that the numbers are the same size no matter how large they are, and automatic sizing uses only offset I believe. Also, setting the guis to scale only makes them very small on mobile so I will have to figure out a balance between scale and offset.

My preferred solution would be to use the buttons as I mentioned but I don’t know how to detect if the screen is small enough for that.

It also looks worse without autoscale

This is how the gui looks without autoscale:
RobloxStudioBeta_NusMa1elOb

Just to understand, are you trying to keep the shape of the UI elements consistant?

Not really, if the text gets too long, the shape of the gui objects resizes to capture all the text in.
I chose this over ScaledText because I don’t really like how unreadable the text is when it gets too long.

Ah, I get it now. AutomaticSize still works with Scale though, so you should look into that.

Can you send me a reference? I couldn’t find it.

I just tested it in Studio; Scaled frame, Scaled Textlabel, AutomaticSize XY on both and (0, 1) scale on textlabel. The result is when I put in more text, the frame gets longer.

How did you get it to work with scale instead of offset?

I just described what I did
gui.rbxm (5.3 KB)
I doubt it’s of much help, but here you go

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.