# Circular buttons are getting stretched

**URL:** <https://community.thunkable.com/t/circular-buttons-are-getting-stretched/1660460>\
**Category:** Questions about Thunkable X\
**Created:** [December 26, 2021, 1:20am UTC](https://community.thunkable.com/t/circular-buttons-are-getting-stretched/1660460 "2021-12-26T01:20:26Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [December 26, 2021, 1:20am UTC](https://community.thunkable.com/t/circular-buttons-are-getting-stretched/1660460/1 "2021-12-26T01:20:26Z")

</div>

I created a drag-and-drop project with this design screen:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/1/a135fde125b78a522d628f45df5fa31524b53242.png)

When I preview it in a browser or view it in Thunkable Live on my iPhone 11, it looks the same. But if I download it to my phone, it appears as though the circular buttons are stretched (height \> width):

 ![IMG_19CAE8EF483A-1](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/d/9/d9b678ce5a799c9f4f423b0a6aa68ce5bb07f29e.jpeg)

I have them set to 70 pixels high and 70 pixels wide. My background picture mode is default/none selected.

Anyone know why this is happening?

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [December 26, 2021, 2:01am UTC](https://community.thunkable.com/t/circular-buttons-are-getting-stretched/1660460/2 "2021-12-26T02:01:22Z")

</div>

I tried changing individual buttons’ Resize Mode to cover, contain, stretch or center. The downloaded project still looks exactly like the second screenshot above.

---

<div class="post-metadata">

**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:** [December 26, 2021, 8:59am UTC](https://community.thunkable.com/t/circular-buttons-are-getting-stretched/1660460/3 "2021-12-26T08:59:49Z")

</div>

To get a near circle you need to get the ratio between the height and width of the actual screen using computed height and width and then update the component size. This option is, unfortunately, not yet available in DnD.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/f/0f59f292712368bce16ff80133ae10de8a6f27e8.png) [@system](https://community.thunkable.com/u/system)\
**Post date:** [March 26, 2022, 9:00am UTC](https://community.thunkable.com/t/circular-buttons-are-getting-stretched/1660460/4 "2022-03-26T09:00:21Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.