White space below footer on specific page in responsive view

yurina.iwabuchi · 2024-09-17T14:34:43.206Z

Hi there,

I’m currently developing a web app using Bubble, and I’ve encountered an issue with the layout on one specific page.(not the index page)

Here’s a brief summary of the problem:

There is a significant white space below the footer and the right side on a mobile/responsive view, but this issue does not appear on other pages.
I have set the footer to align to the bottom, and it works well on other pages.(using “reusuable elements”)
I’ve checked for extra margins, padding, and hidden elements, but I can’t seem to find the cause of the extra space.
*** I see that the header (which is a reusable element) extends into the white space on the right side.**

S__32047131869×1384 143 KB

Here’s what I’ve tried so far:

I made sure the minimum page height is appropriate for the content.
Footer settings: It is set to “Align to parent,” with 100% max width and height adjusted to fit the content.
I also verified that the elements are centered and responsive settings are applied.

I would appreciate your advice…
This is my first time to use bubble and I’m crying!!!

eliot1 · 2024-09-17T15:03:11.902Z

Hi, hard to say without the link of the page to inspect what element is causing the problem.

But you can at least check if you have ever forgot about a min-width on an element of your page or on the header reusable element.

And no need to add 100% max-width. By default an element will take all the width it can if no limit to its max width or “fit to content” checked.

Feel free to DM with a preview link if you want me to look further into your problem.