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.
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.
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.
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.