Forum Academy Marketplace Showcase Pricing Features

Website has 2 inch white border around it - formating error

Even though the website that I built should be full width of the page, there is this huge 2 inch white space around the whole website.

I did check the full width option of the webpage but it is as if the background of the website is white and the elements of the page its self are not stretched properly.

Please advise.

Can you post a link?

It’s likely because you’re not using stripes to style your page, but having shapes instead. When you click on the background, you can add stripes. Check the video “changing the page background” at bubble.is/documentation.

1 Like

It may also help to bear in mind that currently on Bubble the ‘full width’ page width selection does not mean full screen width; it’s just a convenience preset for 1200px. This was confusing for me when I first played with the page width property, so that might be what you’re experiencing. Stripes may help in creating a full-width backdrop of your page, but the content is always narrowed to whatever width your page is restricted to in the property editor.

1 Like

Hey @emmanuel - with regards to stripes, how do you add as a footer / to the bottom of the page? Or for that matter, anywhere on the page? Is that do-able?

I tried to add at the bottom, however I failed since I couldn’t manually add where to place the stripe. Am I missing something?

To add a stripe at the bottom, simply check the option ‘Floating stripe’ and select ‘at the bottom’ in the page’s style settings (see ‘Styles’ just below ‘data’ on the left navigation bar). You can then place a floating element (shape or group) inside the designated stripe area when editing the page design and it will stick to the bottom of the page. Generally you can add sticky stripes at the top or bottom or simply let them stack anywhere else from the top of the page. I can be a bit more clear if any part of this doesn’t make complete sense.

Hey @wahome thanks for the tip - I tried that, however If you see this page https://bubble.io/site/jobbuddy/version-test/contact

The footer at the bottom is not fixed… I can’t understand that behavior (Editor mode - https://bubble.io/page?type=page&name=contact&id=jobbuddy&tab=tabs-1)

Would you be able to help with this?

I can’t access your app editor but… I think the issue is likely that you need to overlay a [floating group] in the stripe area at the bottom of the page where you want the footer. You should then add your links into that floating group.