Make Topbar button work for mobile

I have a top bar button, like seen above.
image
If I switch to mobile, it will completey move
image
This is an example, I photoshopped a random image of that size, the flag is how it SHOULD look, and you can see how small it is in the right corner
How do I fix this?
I do have autoscale plus, but Smartscale won’t work.

Instead of using scale, use offset.
It will retain it’s size across all displays, but it won’t scale to compensate for large displays (such as 4K displays). I don’t see this as an issue, as otherwise I’d see owning a 4K display almost a waste of money, since it’ll be covered in UI exactly the same as any other display.
You should be fine resizing to match a 720p display, but it may be too small for small buttons like these, so try resizing on 1080p as well. You can emulate the displays using the Devices button in the Test tab (if you didn’t know this already).

1 Like

Okay, now how would I do this? I’m not much of a UI design person.

It’s not that hard. It’s the “other value” in a UDim.
Use a Size setting of 0,64,0,64, and see how that works out.

Is there a way to do it, without making it bigger? I want it to stay on topbar.
Also, if I switch to mobile it goes behind my flag GUI somehow.
image
image

Have you tried using a frame with a setting of something like 1,0,0,96 (change the Y offset, 96, to something else if it doesn’t fit), adding a UIListLayout instance and moving the buttons into that frame? You can edit padding in the UIListLayout to make sure the buttons don’t touch eachother. You can also change what direction the list should fill from and in.
Then you can add a UIPadding instance into the frame to make sure the buttons don’t touch the borders of the frame.

Ill try this

The Limit