# Responsive Square using Relative sizing **URL:** \ **Category:** Questions about Thunkable X\ **Created:** [September 29, 2021, 10:16am UTC](https://community.thunkable.com/t/responsive-square-using-relative-sizing/1533331 "2021-09-29T10:16:20Z")\ **Posts on this page:** 15\ **Page:** 1
**Author:** ![carlinmclellan](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/carlinmclellan/32/77831_2.png) [@carlinmclellan](https://community.thunkable.com/u/carlinmclellan)\ **Post date:** [September 29, 2021, 10:16am UTC](https://community.thunkable.com/t/responsive-square-using-relative-sizing/1533331/1 "2021-09-29T10:16:20Z")
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](https://x.thunkable.com/copy/f6c19c103e49c994fde5c00b18ed90f0) ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [September 29, 2021, 10:59am UTC](https://community.thunkable.com/t/responsive-square-using-relative-sizing/1533331/2 "2021-09-29T10:59:58Z")
I made a trick but might not be practical. Check this [https://x.thunkable.com/projectPage/61543ec852e4b5001174db8b](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. ---
**Author:** ![carlinmclellan](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/carlinmclellan/32/77831_2.png) [@carlinmclellan](https://community.thunkable.com/u/carlinmclellan)\ **Post date:** [September 29, 2021, 11:14am UTC](https://community.thunkable.com/t/responsive-square-using-relative-sizing/1533331/3 "2021-09-29T11:14:28Z")
Hi Muneer Hmmm it’s coming up as a rectangle on my Android phone. ![Screenshot_2021-09-29-21-13-20-08_2bbfbfee96a5dfce998f962ebb8b5da3.jpg](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/7/f75b4361a9f288116ace634a111d8ef10cb02ebc.jpeg) ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [September 29, 2021, 11:17am UTC](https://community.thunkable.com/t/responsive-square-using-relative-sizing/1533331/4 "2021-09-29T11:17:30Z")
I made it this way. Click on it and see how it is changed to **square**. ---
**Author:** ![vishruth-ram](https://avatars.discourse-cdn.com/v4/letter/v/82dd89/32.png) [@vishruth-ram](https://community.thunkable.com/u/vishruth-ram)\ **Post date:** [September 29, 2021, 11:18am UTC](https://community.thunkable.com/t/responsive-square-using-relative-sizing/1533331/5 "2021-09-29T11:18:18Z")
click the rectangle and becomes a square! ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/2/e/2e68af46957f42e52c38dccf0767ea59a20149a9.png) ---
**Author:** ![carlinmclellan](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/carlinmclellan/32/77831_2.png) [@carlinmclellan](https://community.thunkable.com/u/carlinmclellan)\ **Post date:** [September 29, 2021, 12:02pm UTC](https://community.thunkable.com/t/responsive-square-using-relative-sizing/1533331/6 "2021-09-29T12:02:44Z")
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](https://x.thunkable.com/copy/1ed9f490abe7909de9fff2e150663607) ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [September 29, 2021, 12:09pm UTC](https://community.thunkable.com/t/responsive-square-using-relative-sizing/1533331/7 "2021-09-29T12:09:24Z")
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](https://x.thunkable.com/projectPage/61543ec852e4b5001174db8b) ---
**Author:** ![carlinmclellan](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/carlinmclellan/32/77831_2.png) [@carlinmclellan](https://community.thunkable.com/u/carlinmclellan)\ **Post date:** [September 29, 2021, 10:35pm UTC](https://community.thunkable.com/t/responsive-square-using-relative-sizing/1533331/8 "2021-09-29T22:35:30Z")
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 ![Screen Shot 2021-09-30 at 8.32.40 am](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/5/d/5d0a0a528807b1c27d5674f3933641b9c916817c.png) ---
**Author:** ![carlinmclellan](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/carlinmclellan/32/77831_2.png) [@carlinmclellan](https://community.thunkable.com/u/carlinmclellan)\ **Post date:** [September 29, 2021, 11:37pm UTC](https://community.thunkable.com/t/responsive-square-using-relative-sizing/1533331/9 "2021-09-29T23:37:44Z")
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. ![IMG_0076](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/7/b/7bd11e911209b9fc3b11a1a02807c943050edca1.jpeg) 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! ---
**Author:** ![mimostel](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mimostel/32/107661_2.png) [@mimostel](https://community.thunkable.com/u/mimostel)\ **Post date:** [September 30, 2021, 6:04am UTC](https://community.thunkable.com/t/responsive-square-using-relative-sizing/1533331/10 "2021-09-30T06:04:04Z")
Doesnt this helps you in an easier way ? (only as an example, im making a perfect square button at the start of a screen). ![screen](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/9/4978ab00c9fc6304b63aa06af38f6194968d49b9.png) 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. 🤔 ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [September 30, 2021, 4:06pm UTC](https://community.thunkable.com/t/responsive-square-using-relative-sizing/1533331/11 "2021-09-30T16:06:24Z")
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. ---
**Author:** ![mimostel](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mimostel/32/107661_2.png) [@mimostel](https://community.thunkable.com/u/mimostel)\ **Post date:** [September 30, 2021, 7:25pm UTC](https://community.thunkable.com/t/responsive-square-using-relative-sizing/1533331/12 "2021-09-30T19:25:30Z")
🤔 … 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. ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [October 1, 2021, 10:14am UTC](https://community.thunkable.com/t/responsive-square-using-relative-sizing/1533331/13 "2021-10-01T10:14:08Z")
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. ---
**Author:** ![mimostel](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mimostel/32/107661_2.png) [@mimostel](https://community.thunkable.com/u/mimostel)\ **Post date:** [October 1, 2021, 10:37am UTC](https://community.thunkable.com/t/responsive-square-using-relative-sizing/1533331/14 "2021-10-01T10:37:32Z")
Ah, i see… then it was my mistake… didnt “catch” the **responsive to the screen** fact 🙄 ---
**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\ **Post date:** [November 8, 2024, 1:15pm UTC](https://community.thunkable.com/t/responsive-square-using-relative-sizing/1533331/15 "2024-11-08T13:15:05Z")