There is a list of buttons that are located one below the other and do not fit into the visible area on the device. With the help of Scroll Rect , a "skewing" of this area is implemented, but with different resolutions the Content starts to float and some data disappears from the visible area.

In the images below, I think the situation will be clearer:

At a ratio of 9:16

At a ratio of 9:16

With "Free Aspect" and fine resolutions

With "Free Aspect" and fine resolutions

With a resolution of 1440x2960 ​​and a ratio of 18.5: 9

With a resolution of 1440x2960 ​​and a ratio of 18.5: 9

Can you please tell how you can solve this problem?

    1 answer 1

    Well, there are several solutions I know.

    The first is Content Size Fitter . This is the component that resizes the object on which it hangs based on the size of the children. You need to hang it on your Content. Any LayoutGroup on the same object is necessary for its work. In the fields of this component is selected based on what logic the height and width of the object will be selected.

    The second is the CanvasScaler . This component works at a different level - it changes the scale of all nested objects based on the selected logic. It is hung up automatically on top level Canvas. There you can select, for example, the Scale With Screen Size mode in this case, you will configure the entire UI for a specific resolution, and already the scaler will change the scale depending on the actual resolution.