# Centering a Module on the Screen

**URL:** <https://community.thunkable.com/t/centering-a-module-on-the-screen/3295734>\
**Category:** Questions about Thunkable X\
**Tags:** help, modules\
**Created:** [October 23, 2024, 9:50pm UTC](https://community.thunkable.com/t/centering-a-module-on-the-screen/3295734 "2024-10-23T21:50:04Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![robert.heatonxc](https://avatars.discourse-cdn.com/v4/letter/r/9f8e36/32.png) [@robert.heatonxc](https://community.thunkable.com/u/robert.heatonxc)\
**Post date:** [October 23, 2024, 9:50pm UTC](https://community.thunkable.com/t/centering-a-module-on-the-screen/3295734/1 "2024-10-23T21:50:04Z")

</div>

I have created a module to be used as a navigation bar along the bottom of our app. Because it is a group, it forces me to choose an X value on the screen, and right now X is from the left of the screen, not the center.

My question is essentially how do I “center” the module on the screen regardless of screen size. Or is the only option that it will always be “x” (pun intended) pixels from the left edge of the screen?

I have already tried adding to a layout which is a no go.

---

<div class="post-metadata">

**Author:** ![sketch](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sketch/32/109058_2.png) [@sketch](https://community.thunkable.com/u/sketch)\
**Post date:** [October 24, 2024, 7:49am UTC](https://community.thunkable.com/t/centering-a-module-on-the-screen/3295734/2 "2024-10-24T07:49:48Z")

</div>

Hi @robert.heatonxc what exactly are the settings for the group component?

By default it is set to float on place for modules, if you want it centered you can change it to stretch so it’ll be responsive to the screen in sizing and position

---

<div class="post-metadata">

**Author:** ![robert.heatonxc](https://avatars.discourse-cdn.com/v4/letter/r/9f8e36/32.png) [@robert.heatonxc](https://community.thunkable.com/u/robert.heatonxc)\
**Post date:** [October 24, 2024, 1:33pm UTC](https://community.thunkable.com/t/centering-a-module-on-the-screen/3295734/3 "2024-10-24T13:33:13Z")

</div>

Thanks for the reply, so stretch will stretch all components in the module evenly across the available space? If you imagine a navigation bar along the bottom of an app on a cell phone, then open that up on say an ipad. Naturally the aspect ratio is different, so will images etc become stretched or will the space between them become stretched or both? Ideally I would like to use a layout so I can control which section stay static and which stretch, but that is not available yet.

---

<div class="post-metadata">

**Author:** ![robert.heatonxc](https://avatars.discourse-cdn.com/v4/letter/r/9f8e36/32.png) [@robert.heatonxc](https://community.thunkable.com/u/robert.heatonxc)\
**Post date:** [October 24, 2024, 1:34pm UTC](https://community.thunkable.com/t/centering-a-module-on-the-screen/3295734/4 "2024-10-24T13:34:37Z")

</div>

By the way I have been searching for resources on UI best practices (for dealing with an app across various aspect ratios) so if you know of any I would love to know.

---

<div class="post-metadata">

**Author:** ![sketch](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sketch/32/109058_2.png) [@sketch](https://community.thunkable.com/u/sketch)\
**Post date:** [October 24, 2024, 1:41pm UTC](https://community.thunkable.com/t/centering-a-module-on-the-screen/3295734/5 "2024-10-24T13:41:46Z")

</div>

> [@robert.heatonxc](#):
>
> so stretch will stretch all components in the module evenly across the available space?

It will indeed resize to the aspects ratio of the device, depending on the image settings the image can resize but this can be easily turned off.

> [@robert.heatonxc](#):
>
> Ideally I would like to use a layout so I can control which section stay static and which stretch, but that is not available yet.

You can mess a bit with the sizing options to achieve something similar.  
Using a component with stretch and have a child inside with float in place can make it work similar (not fully proved to work tho)

---

<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:** [January 22, 2025, 1:42pm UTC](https://community.thunkable.com/t/centering-a-module-on-the-screen/3295734/6 "2025-01-22T13:42:10Z")

</div>

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