Understading Layout element - Min size and preferible size

Hi, I have been some time working with unity, and I am trying to get a better understand of the UI system.

I am a mobile developer and I am redesigning the UI but I am unable to achieve what I want.

My game is portrait and I have a panel. I want the panel to have a maximum width of 1080. In case that the panel doesn't fit in the screen when the aspect ratio is less ( like new iPhone X) . I want it to shrink it a bit with a minimum of 700. In the case that the screen is larger than 1080 ( like iPad pro). I want the panel to have the maximum size.

Visual of what I want to achieve.

Nexus 6P ( 1080x1920)------------------------------------------------------------iPhone X(1125x2436)


iPad pro (2048x2732)



I have been playing with layout element and content size fitter without good result

If I set the min width size to 700 and preferred size to 1080 nothing happen (even playing with flexible width)

If I set the content size fitter. If I choose the preferred size it just get always the preferred size and same with min.

How these elements works, and how I can achieve the desired effect?

Canvas configuration:

 

Try making an object that is the full width of your screen and has a HorizontalLayoutGroup, then make your panel a child of that. Remove the ContentSizeFitter but keep the LayoutElement.

You might need to add additional invisible objects on the right and left of your panel with a Flexible Width to "take up the slack" when the screen is wider than the preferred size, but I don't think that's necessary.

See also: https://docs.unity3d.com/Manual/UIAutoLayout.html

 

It worked, thank you man. No needed to add the invisible objects!