Aligning Menu with a Mesh

Questions
1

Hello. I’ve spent a couple hours trying different ways of doing this, so I hope you can help.

I have a universalcamera pointing at 0,0,-10 and a cube moved left -5. I want to have a button below the cube that stays centered with the mesh. I’ve achieved this with linkWithMesh() but when the window is resized, theres no resizing on the UI button, or the text that I also have linked to the right of the mesh.

Is there a way of keep proportion since I can’t assume what size browser window the user will be playing at? Here is what I have so far:

constructor(engine, babylon) {
  super(engine, babylon, "MainMenu");
  this.displayBox = null;

  this.createDisplayBox();
  this.createGUI();
}

createDisplayBox() {
	this.displayBox = BABYLON.MeshBuilder.CreateBox("displayBox", { size: 2 }, this.scene);
	this.displayBox.position.x = -5;
	this.displayBox.position.y = 0.5;
	//this.displayBox.rotation.x = .35;
}

createGUI() {
    var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("ui1");
    //advancedTexture.idealWidth = 600;

    var button1 = BABYLON.GUI.Button.CreateSimpleButton("but1", "Click Me");
	button1.width = .2;
	button1.height = "30px";
	button1.color = "white";
	button1.fontSize = 20;
	button1.background = "black";

	advancedTexture.addControl(button1); 
	    
    button1.linkWithMesh(this.displayBox);
    button1.linkOffsetY = 200;

    var textblock = new BABYLON.GUI.TextBlock();
	//textblock.height = "150px";
	textblock.fontSize = 100;
	textblock.text = "GAME TITLE";

	advancedTexture.addControl(textblock);

	textblock.linkWithMesh(this.displayBox);
	textblock.linkOffsetX = 450;
	textblock.linkOffsetY = -110;

	/* was a method i tried but failed
	var grid = new BABYLON.GUI.Grid();   
	grid.addColumnDefinition(0.2);
	grid.addColumnDefinition(0.5);
	grid.addColumnDefinition(0.5);
	grid.addColumnDefinition(0.2);
	grid.addRowDefinition(0.5);
	grid.addRowDefinition(0.5);

	var button1 = BABYLON.GUI.Button.CreateSimpleButton("but1", "Change Skin");
	button1.width = .1;
	button1.height = "30px";
	button1.color = "white";
	button1.fontSize = 20;
	button1.background = "black";
	grid.addControl(button1, 1, 1);  

	var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
	advancedTexture.addControl(grid);
	*/
}
2

Hello, you can ask the advancedDynamicTexture to render at a specific resolution (so you always work at a specific scale and the texture will do the scaling for you): Use the Babylon GUI - Babylon.js Documentation

Other option is to use a non-fullscreen UI. In this case you can define a plan, make it billboard and project your UI on it