Hi fam,
I would like to make a square button that adjusts size based on the device screen size.
Using relative size
Height = 25%
Width = 50%
Gets pretty close to a square. But is not quite right.
Is there something simple I’m missing here?
This is my goofy attempt to work it out.
https://x.thunkable.com/copy/f6c19c103e49c994fde5c00b18ed90f0
I made a trick but might not be practical.
Check this
https://x.thunkable.com/projectPage/61543ec852e4b5001174db8b
The other way is to use Web Viewer using JavaScript to get the screen size and use the readings to adjust the size.
I made it this way.
Click on it and see how it is changed to square.
click the rectangle and becomes a square!
Ah yes now I see. Good workaround, thank you.
Unfortunately I don’t think it will work in my situation because I have a pretty complex layout with lots of columns and rows, which seems to throw it out.
https://x.thunkable.com/copy/1ed9f490abe7909de9fff2e150663607
You can use the Splash screen trick. Make the first screen a splash screen with only the text box and a background image for the screen. Wait one second on the splash screen then get the computed height. Now you have the required numbers in app variables which you can use them in any screen.
@carlinmclellan
Check this project
Thanks muneer for the excellent workaround 
For anyone following along –
Make sure you set the label height and width to Fill Container. I neglected this important detail.
The size of the square is being pulled from the screen size, so wont be affected by columns etc.
Use a bit of math / experiment to get the correct size. e.g. if you Multiply the width by 2, it will fill the width of most devices. See below
The perfect square continues to elude… 
Hi gang –
I’m having a bit of trouble getting the square to resize to the right proportion on different devices.
e.g. The square takes up about 80% of the width on my iPad, compared to about 40% on my phone.
It’s related to the screen ratio variable.
I understand that I need to write an equation takes the screen ratio and then adjusts so that it resizes proportionally. My brain is just can’t quite work it out. Can someone who is good at Math help me out?
If anyone’s interested I’m making a visual schedule for parents/educators 
TIA!
Doesnt this helps you in an easier way ?
(only as an example, im making a perfect square button at the start of a screen).
On this example, WIDTH is defined already in design mode as a percentage of the screen (so will be the same percentage no matter of the device). Height doesnt matter at this point. Loop gives time to button to display, so “computed” will have make sense. Then i just set to height the same value as width.
This is a good trick but only works in the button is placed directly in the screen. If you use the same code for a button placed inside a row or column then it will take up the percentage calculated from the size of the row or column and not the screen.
… if in a row, its height will be, lets say, 100% pecentage of the row (or 95%, and so on) - and width will be equal to height. If in a column, its width will be 100% of the column (or 95%, …), and height will be equal to width. In both cases, button will be percentage of the row/column, and row/column cannot be “fit contents” for the button. And no matter of the device, button will still be perfect.
Sorry, I was not clear, I was referring to the original request of the square button to be responsive of the screen. The issue is that Thunkable does not provide computed screen size otherwise it would be easy.
Ah, i see… then it was my mistake… didnt “catch” the responsive to the screen fact 
