@MackeyK24, I’m sorry I was unclear. I assumed you were using CreateFullScreen in code since your GUI was rendering full screen even though the GUI editor was set to not be responsive. I was pointing out that designing the GUI in editor can differ from how it is constructed in code so even if you intend a design to be projected and this disable responsive in the GUI editor, the ADT can be constructed with CreateFullScreen which will render it full screen. So this is something to consider in design.
When the window resizes, the ADT resizes automatically and will render the controls as they were designed. So if you design a rectangle to be 50% of the width of the ADT, it will render at 50% width of any size of the browser window. If you design it to be 960px (half the width of a 1920px screen) and the window is reduced to smaller than 1920px wide, the rectangle will not render at half the screen width and will eventually cut off when the window is narrower than the rectangle.
When I was speaking about different JSON files based on screen size, it was because there is a cutoff when browser window could be considered a mobile format. An example would be to look at http://doc.babylonjs.com and then reduce the width of the window. At some point the sidebar disappears because we consider the window to be a mobile format which is just using different CSS. For Babylon GUI, you could use the window resize event and determine if the width falls beneath a certain measure and then load a different ADT json with a different layout.
For the question you just asked, there is one, possibly two, other things to consider to make your layout stick to the sides. The first is alignment. Right above your red box around the position and width/height are the alignment buttons. Right now you are aligned center horizontally and vertically and any offset is taken from there. This means that whatever you are using, percent or pixel is measured from the middle of the ADT. If you want your controls to stick to the sides of the window, it’s better to left align controls on the left and right align controls on the right. This way you are taking offsets from the sides and not the center which will more accurately position the controls. Same with top and bottom.
The other thing that you may want to consider is the pivot point for a control. We default pivots to the center of the control, but if you want to use controls of different widths all aligned on the left side of the screen, you may want to move the pivot point of each control to the left edge of the control like (0, 0.5) to set left edge and center vertically. All offsets are measured from the pivot point, so if you have controls of differing widths, there offsets from the left edge would be different if their pivot points were all set to the center of the control.
So you may want your top left control:
To have parameters that look something like this:
Note alignment left/top and pivot point (0,0) with position and size both in pixels. This means that control will hang at the same place from left and top no matter what size the screen is like below:
And having the GUI Editor in responsive mode allows me to change the size of the ADT in the editor to check out how the GUI will respond in different proportions.