# Optimal screen height settings for native mobile app?

**URL:** <https://forum.bubble.io/t/optimal-screen-height-settings-for-native-mobile-app/152286>\
**Category:** Mobile\
**Created:** [May 21, 2021, 1:23am UTC](https://forum.bubble.io/t/optimal-screen-height-settings-for-native-mobile-app/152286 "2021-05-21T01:23:11Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![omar555](https://avatars.discourse-cdn.com/v4/letter/o/8edcca/32.png) [@omar555](https://forum.bubble.io/u/omar555)\
**Post date:** [May 21, 2021, 1:23am UTC](https://forum.bubble.io/t/optimal-screen-height-settings-for-native-mobile-app/152286/1 "2021-05-21T01:23:11Z")

</div>

I’m building a mobile app for iOS only using Bubble/BDK and trying to figure out the optimal way to handle the screen height/scrolling issue.

Currently I’m using 375x812 for the page dimensions, however, for some of my screens, the page content exceeds 812px. See below:

 ![Screenshot 2021-05-21 at 02.31.32](https://us1.discourse-cdn.com/bubble/original/3X/9/a/9a881d173ea4a514c1e9a90a87bdf52baa40ac52.png)

I’m aware of two solutions, but I don’t think they can solve my issue:

- Set groups that exceed screen height to collapse (my bottom group is partially visible on load so cannot be collapsed??)

- Use a repeating group (my groups contain different content in different formats, so RG’s aren’t suitable)

Any ideas on a possible solution?

---

<div class="post-metadata">

**Author:** ![jared.gibb](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/jared.gibb/32/123329_2.png) [@jared.gibb](https://forum.bubble.io/u/jared.gibb)\
**Post date:** [May 21, 2021, 1:37am UTC](https://forum.bubble.io/t/optimal-screen-height-settings-for-native-mobile-app/152286/2 "2021-05-21T01:37:46Z")

</div>

What about

Design the group full size

Resize the group by manually setting the higher by pixel(I think you can do this and make the group smaller than it should be but I could be imagining throngs too

Use css to set the overflow-y for that group to scroll?

---

<div class="post-metadata">

**Author:** ![d9999](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/d9999/32/95645_2.png) [@d9999](https://forum.bubble.io/u/d9999)\
**Post date:** [May 21, 2021, 4:56am UTC](https://forum.bubble.io/t/optimal-screen-height-settings-for-native-mobile-app/152286/3 "2021-05-21T04:56:05Z")

</div>

Not sure i understand what you issue is. why can’t the user just scroll down?

What i used a lot for may apps is setting the group / element height using CSS and classify…this works well for certain thing but not necessarily if the group contains content…

---

<div class="post-metadata">

**Author:** ![d9999](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/d9999/32/95645_2.png) [@d9999](https://forum.bubble.io/u/d9999)\
**Post date:** [May 21, 2021, 4:59am UTC](https://forum.bubble.io/t/optimal-screen-height-settings-for-native-mobile-app/152286/4 "2021-05-21T04:59:13Z")

</div>

Not sure i understand what you issue is. why can’t the user just scroll down? Should not be an issue if there is actual content to scroll through? Two ideas:

What i used a lot for may apps is setting the group / element height using CSS and classify…this works well for certain thing but not necessarily if the group contains content…  
 ![image](https://us1.discourse-cdn.com/bubble/original/3X/7/0/703d2e3b2877faebd7fe53af85e8c63261187f7a.png)

![image](https://us1.discourse-cdn.com/bubble/original/3X/5/b/5bd39c436adb8b8467c2a6303b2a1c6497ab5c60.png).

(make sure to install the classify plugin - otherwise this won’t work)

another way is to add small collapsable groups like this:

 ![image](https://us1.discourse-cdn.com/bubble/original/3X/a/c/acdafb37f1eb72e66f0963409df0c06a9029c03b.png)

---

<div class="post-metadata">

**Author:** ![omar555](https://avatars.discourse-cdn.com/v4/letter/o/8edcca/32.png) [@omar555](https://forum.bubble.io/u/omar555)\
**Post date:** [May 21, 2021, 12:03pm UTC](https://forum.bubble.io/t/optimal-screen-height-settings-for-native-mobile-app/152286/5 "2021-05-21T12:03:17Z")

</div>

So to ensure all the content fits on my screen, I’ve just changed the dimensions to 375x910 and it works fine in Preview… but is this likely to cause me issues in the future?

Example of my screen: [Screentest | Bubble Editor](https://bubble.io/page?name=index&id=screentest&tab=tabs-1)

---

<div class="post-metadata">

**Author:** ![d9999](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/d9999/32/95645_2.png) [@d9999](https://forum.bubble.io/u/d9999)\
**Post date:** [May 21, 2021, 12:22pm UTC](https://forum.bubble.io/t/optimal-screen-height-settings-for-native-mobile-app/152286/6 "2021-05-21T12:22:15Z")

</div>

it make sense to develop on a large screen (so 910 height makes sense) and then makes sure it scales down well for smaller screens (e.g. using collapsing groups) - that’s just part of the process and cannot be avoided. I use [https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb?hl=en](https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb?hl=en) to check for different screen sizes. So when ever i change a page i look at all the different screens and adjust until it works on all of them.

 ![image](https://us1.discourse-cdn.com/bubble/original/3X/5/9/59344f3fa9ffff64cef27a3d751a9e023c40a538.png)

PS: make sure your content groups do not go behind the bottom nav bar (but stop at the navbar) otherwise the user cannot scroll down fully.  
 ![image](https://us1.discourse-cdn.com/bubble/original/3X/1/2/1260caff17a52d667bb85845c3d1cfd034f438d1.png)
