Responsive UI for 16:9 and 4:3 ratio orientation


#1

Hi
Does anyone have a trick from creating a responsive UI that rotates/animated orientation, but also scales to screen ratio?
I have got it working fine for a standard smartphone screen which is 16:9, but when I tested it on an iPad my UI/buttons were cropped.
For now, I have simply applied the title-safe approach, but this means that the UI is doesn’t look as good on a 16:9 iPhone.
Thanks
Simon


#2

Hi Simon,

I hope you are well! :blush:

I believe that I’ve answered your support ticket in more detail, but just in case anybody else is looking for an answer, I thought I’d provide a quick one here!

You can set content ‘Relative To’ ‘Z.screenRight’ and ‘Z.screenLeft’ which will automatically resize content based on device screen dimensions. If you’d like to read more about this, we have a handy UI Coordinate Systems article here (there’s a quick 5 minute video if you don’t have time to read)!

:woman_teacher: As an extra tip, if you’d like a node to stay in the centre, you can set the ‘Relative To Prop’ property to ‘0.5, 0.5’ when it is set ‘Relative To’ both Z.screenRight and Z.screenLeft.

Have a great day!
Francesca :grin: