# How to get layouts to fit the actual width of a phone screen?

**URL:** <https://community.thunkable.com/t/how-to-get-layouts-to-fit-the-actual-width-of-a-phone-screen/3035545>\
**Category:** Questions about Thunkable X\
**Tags:** design\
**Created:** [May 31, 2024, 9:03pm UTC](https://community.thunkable.com/t/how-to-get-layouts-to-fit-the-actual-width-of-a-phone-screen/3035545 "2024-05-31T21:03:46Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![anxirileyrhsuqv](https://avatars.discourse-cdn.com/v4/letter/a/71e660/32.png) [@anxirileyrhsuqv](https://community.thunkable.com/u/anxirileyrhsuqv)\
**Post date:** [May 31, 2024, 9:03pm UTC](https://community.thunkable.com/t/how-to-get-layouts-to-fit-the-actual-width-of-a-phone-screen/3035545/1 "2024-05-31T21:03:46Z")

</div>

i have noticed a significant sizing difference on the apk version of my app, compared to the web version.

on the web version is what my layout is intended to look like. it’s width is supposed to cover the entire screen. however, on the apk, it doesn’t appear to be doing so. the issue is that i may be using an emulator, but i’m not sure.

web viewer:  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/8/b8788af62f1b3b1ce509232955a54ff1b87f125f.png)  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/d/6/d6d918041f3ba8f00a698dbb232b121b56af89e5.png)

apk (on emulator):  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/6/e6c0741a562f1ffa7c7b87c8e94e4e5427c6589c.png)  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/7/5/756a22be6b821c3e0614c2a1abc23bef4dbe2c2f.png)

what would be the best number to choose so that it can stretch to the actual width of the screen? the resizing mode of the components are set to “stretch”, as well.

---

<div class="post-metadata">

**Author:** ![anxirileyrhsuqv](https://avatars.discourse-cdn.com/v4/letter/a/71e660/32.png) [@anxirileyrhsuqv](https://community.thunkable.com/u/anxirileyrhsuqv)\
**Post date:** [June 1, 2024, 2:12pm UTC](https://community.thunkable.com/t/how-to-get-layouts-to-fit-the-actual-width-of-a-phone-screen/3035545/2 "2024-06-01T14:12:48Z")

</div>

any ideas?

---

<div class="post-metadata">

**Author:** ![tiny\_apps](https://avatars.discourse-cdn.com/v4/letter/t/3d9bf3/32.png) [@tiny\_apps](https://community.thunkable.com/u/tiny_apps)\
**Post date:** [June 1, 2024, 7:00pm UTC](https://community.thunkable.com/t/how-to-get-layouts-to-fit-the-actual-width-of-a-phone-screen/3035545/3 "2024-06-01T19:00:38Z")

</div>

Please post component tree… also if you can share the project that will be great

---

<div class="post-metadata">

**Author:** ![anxirileyrhsuqv](https://avatars.discourse-cdn.com/v4/letter/a/71e660/32.png) [@anxirileyrhsuqv](https://community.thunkable.com/u/anxirileyrhsuqv)\
**Post date:** [June 2, 2024, 11:57pm UTC](https://community.thunkable.com/t/how-to-get-layouts-to-fit-the-actual-width-of-a-phone-screen/3035545/5 "2024-06-02T23:57:33Z")

</div>

the first screenshot are 3 buttons in a layout component, and the second screenshot are labels in a layout component.

here’s the latest copy of the app:  
[https://x.thunkable.com/copy/672105bbae4a55a0be1591f53b86d8b8](https://x.thunkable.com/copy/672105bbae4a55a0be1591f53b86d8b8)

---

<div class="post-metadata">

**Author:** ![anxirileyrhsuqv](https://avatars.discourse-cdn.com/v4/letter/a/71e660/32.png) [@anxirileyrhsuqv](https://community.thunkable.com/u/anxirileyrhsuqv)\
**Post date:** [June 4, 2024, 6:26pm UTC](https://community.thunkable.com/t/how-to-get-layouts-to-fit-the-actual-width-of-a-phone-screen/3035545/6 "2024-06-04T18:26:26Z")

</div>

anyone?

---

<div class="post-metadata">

**Author:** ![marion.dorsett](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/marion.dorsett/32/175129_2.png) [@marion.dorsett](https://community.thunkable.com/u/marion.dorsett)\
**Post date:** [June 4, 2024, 8:55pm UTC](https://community.thunkable.com/t/how-to-get-layouts-to-fit-the-actual-width-of-a-phone-screen/3035545/7 "2024-06-04T20:55:34Z")

</div>

@anxirileyrhsuqv did you try running the app in the Thunkable Live app?

You can run the Thunkable Live app on your emulator as well and see if they’re consistent.

I have not figured out the best component UI layouts at this point in time either, so I’m curious how the Live compares to the APK file.

---

<div class="post-metadata">

**Author:** ![anxirileyrhsuqv](https://avatars.discourse-cdn.com/v4/letter/a/71e660/32.png) [@anxirileyrhsuqv](https://community.thunkable.com/u/anxirileyrhsuqv)\
**Post date:** [June 5, 2024, 2:23pm UTC](https://community.thunkable.com/t/how-to-get-layouts-to-fit-the-actual-width-of-a-phone-screen/3035545/8 "2024-06-05T14:23:35Z")

</div>

wow, i never thought to use the thunkable live app on the emulator 🥲

i have started putting all of my components in one layout component, and i have noticed that everything in a layout component does not have shadows underneath them. this is evident in the apk file, along with the thunkable live app on the emulator.

i still need to figure out the dimensions of everything in order to get them to fit properly in the screen, however…

---

<div class="post-metadata">

**Author:** ![anxirileyrhsuqv](https://avatars.discourse-cdn.com/v4/letter/a/71e660/32.png) [@anxirileyrhsuqv](https://community.thunkable.com/u/anxirileyrhsuqv)\
**Post date:** [June 5, 2024, 8:29pm UTC](https://community.thunkable.com/t/how-to-get-layouts-to-fit-the-actual-width-of-a-phone-screen/3035545/9 "2024-06-05T20:29:59Z")

</div>

after some research, i have found that these combination of blocks seem to work for me. it does give me the results i’m looking for in the emulator, and hopefully this can work for all devices:

![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/9/b/9b67cf7368ed4dfb5d937c08643c711ba480910d.png)  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/9/497e4b189cc220ec0d24e4714cff1d79200de355.png)

---

<div class="post-metadata">

**Author:** ![tiny\_apps](https://avatars.discourse-cdn.com/v4/letter/t/3d9bf3/32.png) [@tiny\_apps](https://community.thunkable.com/u/tiny_apps)\
**Post date:** [June 6, 2024, 5:29am UTC](https://community.thunkable.com/t/how-to-get-layouts-to-fit-the-actual-width-of-a-phone-screen/3035545/10 "2024-06-06T05:29:40Z")

</div>

for sure this is not right way ,

i checked your project it is too big to understand please point out to specific screen / layout/group

from one scren bottom meny was set as float in place

---

<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:** [September 4, 2024, 5:30am UTC](https://community.thunkable.com/t/how-to-get-layouts-to-fit-the-actual-width-of-a-phone-screen/3035545/11 "2024-09-04T05:30:16Z")

</div>

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