Project UI responsiveness issue

hello
I recently created a project you can see here

its basically 2 buttons and screen and all kinds of things happen.
the issue I’m having is that despite setting the screen to be scale blend 0.5.
both the UI (and of course the 3d area) are not responsive.
I aim to make it work even if I open the link from my tablet or phone with the buttons stitched to the side of the screen and the 3d screen scaled down to fit the screen size.

how can I do that

Hi @nirharpaz,

Can you share some more info on how you have your screen/elements set up?

Here is an example of a Text Element anchored on the Top Left corner of a screen (scale blend set to 0.5):

https://playcanvas.com/editor/scene/915549

image

there you go
https://playcanvas.com/editor/scene/908991

now, following the screenshot you shared i managed to solve the UI issue
thanks.
only thing left now is how to fit the 3d area to be responsive to screen size

Good! To fit the 3D area in view I think you have two options:

  1. If you want it to fit both sides of your screen (width/height) the easiest solution would be to change your app resizing method to keep the aspect ratio:

image

  1. If only one side is enough you can use the horizontalFov property on your default camera, this can be set using code:
// this will set the X (width) axis to be used when calculating the camera FOV
// keeping the same field of view when resizing the width of your window
this.app.root.findByName('Camera').camera.horizontalFov = true

thank you
on which component is this script located?
image
I looked both on root and camera and could not find it

You can find it by going to settings -> rendering.