Hi everyone,
I’m having an issue with the layout of my Bubble app. On my homepage, I have a full-page image at top of the page (height: 767px) with a call-to-action button over it. Below this, I’ve added a new group section to continue adding information to the home page.
The problem is that when I add the new group below the image, the image is pushed up and gets cut off halfway when I preview the page. I want the image to stay fully visible in its 767px height, and for the user to scroll down to view the new section below it.
Here are the specific settings I’ve applied:
- The image is inside a group with a fixed height of 767px.
- I have another group below the image with a similar fixed height of 767px for its content.
- Both groups are set to column layout.
- The page is not set to fixed-width.
Despite this setup, the image is getting cut off, and the group below is pushing it up rather than being placed below it as expected. I’ve tried adjusting the margins and padding but can’t seem to resolve the issue.
I’ve attached some screenshots of how it should look (when I’ve removed the group below the image):
and how it looks when the group below the image is added:
As you can see in the screenshot, I’m at the top of the page so it shouldn’t be cutting off.
Layout settings:
Has anyone encountered something similar or have any ideas on how to ensure that the full image remains visible and the next section is viewable only when scrolling down?
I’m sure it will be something stupid that I’m missing but I can’t figure it out of find any other help online. Thanks in advance for any advice!