Forum Academy Marketplace Showcase Pricing Features

Optimal screen height settings for native mobile app?

Need help Mobile
#1

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
Screenshot 2021-05-21 at 02.31.321256×1282 37.2 KB

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?

#2

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?

#3

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…

#4

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

image.

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

another way is to add small collapsable groups like this:

image
image656×617 58.9 KB

#5

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

#6

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 Responsive Viewer - Chrome Web Store 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
image1116×736 55.9 KB

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