UI does not scale and is eaten by a screen

Hi, i am trying to find a solution to this problem for nearly 4 hours and i have no idea what is wrong.

So what i am trying to do is to scale my ui down so it looks nice on every or most resolutions. However i cannot get it to work, even tho i did before.

Here is a screenshot when im using a Free Aspect mode:

And here is a screenshot of my ui after i use 5:4 resolution:

As you can see everything is messed up. Every button on both of those screens is in a grid layout group(besides Text). As you can see, one that is organized vertically scales perfectly fine, but everything else is not, and i have no idea why (they are both under the same parent).

My canvas is set to scale with screen size, with match set to 0.5. All of the objects here are organized using pivots (their position is set to 0 as you can see on the second screen). I have no idea what can be wrong. Any help is appreciated.

I saw your comment on one of my old questions.

I don’t remember the video or that solution but I can give you the solution I use now a days.

Make sure your cavas scaler match option is set to 0.5 and you’ve set the reference resolution correctly.

I usually use Grid Layout Group to set up the layout in the editor. I then disable it. If you want a more dynamic option you’ll have to mess around.

I then set the anchor of every button or panel or object to their 4 corners. I use this script to do it.

Just place it in a Folder called “Editor”, without quotes. Then select the object or objects you want to align the anchors with and then press ctrl+[ to set the anchors to the corners.

ctrl+] will shape the object to the anchors which can sometimes cause unwanted side effects because you can’t undo with ctrl+z.

And once the anchors are set you are ready to go. You can scale it in any direction and it should scale to the screen.

I have no idea if this is the correct method, but I find that no matter what the resolution, the objects will scale correctly.

Hope that helps.

perhaps you could change the position of the UI through script?

For UI elements, with your purpose, you should do like this:

  1. Calculation Ratio of Your device Screen Size (Resolution)

  2. Coding to re-generate your UI element Size & Position follow the DESIGNED Canvas and REAL device Screen Size.