Keep GUIs with a grid layout the same on different devices

You can write your topic however you want, but you need to answer these questions:

  1. What do you want to achieve? Keep it simple and clear!
    Keep frames in a scrolling frame with a grid layout to stay the same on all devices

  2. What is the issue? Include screenshots / videos if possible!
    When I view the game on mobile, the frames in a grid layout change positions. (Video below)

  3. What solutions have you tried so far? Did you look for solutions on the Developer Hub?
    Yes, but I couldn’t find anything that helped.

Have you tried to put a UIAspectRatioConstraint into the Scrolling Frame?

I did put a UIAspectRatioConstraint into the scrolling frame but I don’t think it changed anything.

Are you using Scale instead of Offset inside your UIGridLayout? like this:

This will keep it scaled across different screen sizes. Also keep the cell padding scaled too, not just the cell size.

No need for the aspect ratio constraint.

8 Likes

I recommend putting it in the main frame, or using a scaling plugin, or like @RMofSBI said of Scale.

1 Like

Thank you! This worked
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ

1 Like

Ok I think I know the issue but you have to resize the the Green GUI too.
Because maybe, Can you show the size I am sure you were using the Right Number and not the left number.

try this for the scroll frame Size {0.36, 0},{0.75, 0}
and something like this for the Green Button {0.4, 0},{0.064, 0} (Use the Number in the left).

The left number is screen size or parent size %
The right number is pixel or something like that

do this if you are not using a plugin

1 Like

This makes it so that the bar would scale with the size of the canvas though. What if you have a dynamic scrolling canvas that needs to be able to change size?