Hello,
I have been on this problem for the whole day and I didn’t find how to fix it. Can you please help me?
Basically there is a white space that appears between the last group of the page and the footer. This space only appears on desktop and only when the page is stretched more than 1200 px (the width which I used in the setup of the page).
Do you have ideas how i can solve this?
You can view the page on https://tisupporto.it/version-test/
Thank you very much for the help!
Alex
Hey Alex,
Welcome to Bubble 
Are there any other elements in between that last group and the footer? Check inside the elements tree to make sure there isn’t anything in that space. If that is the last group, simply moving the footer closer to the last group and reducing the total height of the page should do the trick. Feel free to share a link to your editor too. I’d be happy to take a look.
Hi Jacob,
thanks for the reply and for welcoming me to the Bubble community 
I checked and there is nothing inbetween the last group and the footer. This is how I see it in the editor
As soon as I decrease the page width to <1200 one of the boxes in the group before the footer gets wrapped in the previous line, filling in the blank space that is visible when page width is > 1200. Can it be related to this?
I took this part of the home page from a template…
This is the link to my editor: Supportarest | Bubble Editor
Cheers!
Hey Alex,
Just took a look at the app. Strange case indeed. The responsive editor is not showing the gap that you’re seeing on desktop. I have a suspicion that the “contactti A” reusable element that you have on the page may have something to do with it. Try deleting “contactti A” on the index page and see if this has any effect. (You already have this reusable element nested inside of the footer reusable element, so you should still be able to trigger the popup by clicking on the “contactti” text in the footer. I don’t know if this will change anything, but let’s see. I’m curious about this now.
Hi Jacob,
thanks for checking.
I deleted both the footer and the Contatti popup and the white space still remains. I also coloured the main group in red and the page in dark grey. When checking now, the space at the bottom is grey, therefore it might be related to the page height not resizing properly.
Hey @alex.892,
I noticed the bottom part is called a Footer. Does that mean it is a floating group attached to the bottom?
I just tried to remove the hiding condition of the mobile group and I don’t see the grey area at the bottom anymore. As soon as I put that condition back, I see again the grey area.
Hi @J805,
thanks for checking.
The footer is just a group, not a floating group. When I tried to implement it with a floating group I had responsiveness problems.
I think I figured it out, I can explain it in a bit.
Try this Collapse all Groups Button
I think one of your hidden groups might be getting in the way. It’s worth a shot. There could be something overlapping as well that could be interfering.
I hope that helps.
Unfortunately it didn’t work. Great to know how to collapse all the elements tho.
In the meantime I played around and I changed the structure of the screen by removing the Group Main Container, which was the parent of all the groups which build the different sections of the screen. By doing this I solved the issue at the bottom of the screen. Nevertheless, the problem now is that on mobile, the Group Main Desktop does not collapse. This was exactly the reason why I created a parent group containing all the other groups, to solve the issue in mobile.
Can this issue be related to the issue we had before? Any suggestion?
You can see the issue in the screenshot.
Hey Alex,
Just took another look. Right now, you have the reusable element “Group Header A” at the top of the screen (y = 0). You also have the group “Main Desktop” at y position of 0, so there is some overlap between the two.“Group Header A” has a height of 90 px. Try giving the “Main Desktop” a y value of 90, so that this group is directly below “Group Header A” (you’ll have to shift everything else on the page down by 90 px as well). It seems like you have all of the visibility conditions and “collapse this element’s height when hidden” values set up correctly, but collapsing won’t work if there is overlap between groups. Give this a try and let me know if it works.
Hello Jacob,
I moved everything down 90 px and it looks like it remains in the right position (h=90px). Nevertheless, I would like to have the header transparent and overlapping the main image. How can I achieve this?
I created a clone of the index to play around, trying to find the solution: https://bubble.io/page?type=page&name=index_v2&id=supportarest&tab=tabs-1
Summary of the things I tried and their result.
Alex
Hi @alex.892 , have you resolved this issue?
I’m having a similar issue with a large white space below my footer. I have investigated everything I can think of and I cannot figure out how to make it go away. I’m close to contacting bubble support because I don’t think it’s anything I’m doing.
Hi @marktuff,
No I didn’t manage to solve the issue.
The support team told me they identified the issue and that they would deploy a fix, but they didn’t do it yet.
Thanks for the update.
I ended up just getting rid of the “group within a group” section and it solved my problem. Not ideal though if it’s a requirement to keep a particular group hidden and it’s jacking up the bottom of the page. Hopefully they deploy a fix soon.
Hi Alex,
I just found a fix for this problem, if you still need it all these months later haha.
On my page, my footer is a reusable element. If you go into the reusable element and great a Group beneath it that is NOT visible on page load, and collapses when not visible, this will solve it. If your footer is not a reusable element, you will need to do the same thing on the actual page: put the “false” Group under it to the bottom of the page, and apply those settings.
Hope this helps
@alex.892 forgot to tag you in my above post
