Whitespace on my webpage

Hi new Bubble user here,

I have a question. I am currently trying to make my webapp responsive, but I suddenly have gotten a lot of whitespace when i try to make it responsive on the Ipad version. Anyone an idea of what may cause this?

Here’s some recommendations I’d check for this:

Within your editor, choose the responsive view tab, and mouseover that area to see if there are any hidden elements extending downwards.

Additionally check your group and page height settings.

Finally, when in preview use the inspector to check element render sizes and for hidden elements.

If i am looking correctly there are no hidden elements right? My webpage is pretty basic. It seems to work fine on other devices, such as laptop and mobile, but not on an ipad. There is no element beneath the footer

Is this new screenshot also from iPad? Is the background just white? I don’t have a tablet so I can’t check - but what to websites normally look like that are short / end before the bottom of the tablet’s display?

It is possible that the content ends at this height. And since there is nothing else to show, it ends up as whitespace.

If so, I would recommend to make the parent group & image 100% height, and the form section to align center.

If this is not the correct solution for you, you could also break the group after a certain width. (Image above the form or no image at all depending on design preference)

Basically play with the responsive part to get your desired result.

Hope this helps!

Yes the background is just white, but it ends up being quite large when using the Ipad in de developers tool of Chrome. I have also checked this with an IpadIt works fine on tablets that uses Android. I have tested this on an Ipad and it looks like this:

Ahh okay, I will check this out!