White space below footer on specific page in responsive view

Need help Mobile
1

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__32047131
    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!!! :smiling_face_with_tear: :tired_face: :sob:
:smiling_face_with_tear:

2

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.