Remove Massive Spare Space on Page

Hello!

Hope you are all well!
So I’ve been building basically a single page, everything within the 860 block group, and in the bubble editor it’s extremely long/vertical (like 30000k pixels).
When I view the page it shows only what I want, however still has massive scrolling, just wondering if there’s a way to collapse all that extra space.

Ive tried mainly creating a group that collapses for like 28000 pixels, but no luck

Any help would be awesome

Hello @haydnhinks !

Long pages in Bubble can be very long do not worry. You can conditionally display what you need.

I am not sure if you are experiencing a long page when previewing that is 30k pixels high.

In any case, please review this video which shares all the information needed about conditionally displaying elements the “Canvas way” :sweat_smile: (done of course with native Bubble logic)

Please let me know if this helps.

Hey @cmarchan

Cheers for reply.

I watched the video, I don’t believe there was anything that would help my current issue, and I believe I’ve mainly built my website based on principles there.

Ive created a video, sorry no sound.
But I’m trying to show how it looks in editors (basically a lot of groups/blocks stacked on top of each other, where their height is collapsed when not visible, which only one block is visible depending on page variable) I’ve also put extra placehodlers that collapse as soon as page loads, however that doesn’t seem to fix the issue.
But issue is simply, things are collapsing but the ‘860 block group’ is still massive.
do you get what I’m getting at?

Hello @haydnhinks !

Many thanks for the video.

It seems that one or more groups are stacked on top of each other. Or one or more be missing the collapse when hidden checkbox. This latter one is less likely but is worth checking for it anyways.

As a side note, let me call your attention to an additional tool available to you when inspecting a page. There is a text right under the inspect button that once clicked reveals an x-ray type visualization mode of the page. This helps to uncover not easily identifiable elements when previewing a page.

Now, getting back to suggestions to fix the problem.

I would like to invite you to think of “vertical distance” as a concept that is not clearly illustrated by Bubble or by conventional Bubble teaching.

If one wants to manage vertical distance in Bubble one has to realize that their method of freely dragging and dropping groups or other elements on the page could be done in a structured or in an unstructured way.

If done unstructured then there is no way to manage vertical distance as some or many elements on the page are setting up a location on the page that gets displayed by the responsive engine as best as possible depending on a device’s viewport dimensions.

If done in a “jenga” type of way … vertical stacking of each element within its parent … there is more “structure” and vertical distance is managed in a more controllable way.

I hope the above makes some sense here :sweat_smile:

When building by vertically stacking elements … one has to make sure that the “jenga” tower does not have any overlapping elements or groups within each “parenting” group. Any element (group, input, etc) that overlaps on another may be called under this approach … a “wild” element that breaks the “jenga” tower.

Look for “wild” element or elements on your page and either reposition it adequately on the “jenga” tower … or if unneeded… delete it.