How to adjust screen for portrait and landscape mode such that all elements can be seen?

I am building an app.I have kept my reference resolution game view setting as (800 x 1200) .Settings for canvas shown below


When I check the it Iphone6(750 x 1334) resolution I can see the contents but certain components are cropped with respect to width.The Game view is shown below. I use panels,vertical layout group,horizontal layout group many UI components in my application.


Now I changed my Game view resolution to ipad pro(2224 x 1668).Now I cannot see my images.The Game view is shown below


I dont know how to adjust the UI elements according to different screen sizes.Some of the answers I observed was I should keep settings as Scale with screen size,match width or height and Match slider to 0.5. I have kept these settings(see first image).Still it is not changing according to different screen sizes.

I tried Aspect ratio fitter inside the parent element(Showdata) but of no use.What should I do to change screen according to different screen sizes?Is it because I am not anchoring UI elements in a proper way?
How will you anchor something like this(Canvas>Panel(Stretched along XY)>Panel(with Vertical layout)>Many UI elements)

 

Were you able to resolve this issue or get an answer elsewhere? I'm experiencing a similar problem that is frustrating and I've been spinning my wheels trying to come up with a suitable solution.

 

I didnt solve this but this answer came close.https://stackoverflow.com/questions...ode-such-that-all-ui-elemen/59439072#59439072