Severe Mobile UI problems

I am trying to create a portrait mobile game, but the UI is completely unpredictable and I’m having an impossible time setting it up.

This is what I get when I try to simulate mobile in the viewport options. I have already set the orientation mode to Portrait in the project menu, so I don’t get why there is so much black room, and it causes the UI to be completely misplaced.

123621-mobile+2.png

This is what that same UI looks like in the UI editor. The whole diagram is completely misleading, considering that the bar looks like it should be half the screen, but ends up being the full length of the screen in the actual game.

I had just worked really hard to create this UI for the selected screen resolution, but, when I play it in the viewport, or simulate mobile…

I get this. I have no control over the size, scale, or location of the widgets. I’ve already tried changing the size of the viewport, via dragging the window, but that only made the UI go offscreen, and changing the anchors couldn’t fix that.

123624-mobile+5.png

I went back into my UI and set the size to instead be for a 20" laptop, the one I have, and surely enough, I got exactly what I was seeing. So what gives? What’s the point in being able to design it for a particular size if its just gonna show me my on laptop size instead? And how do I change this so I can accurately work on my game with the UI in the place I want it to be?