How do I remove white space around edges?

Need help
1

Hi all,

I have a couple of pages in my app that have this white space around the edges. It appears on the upmost page “calendars-public”. I tried layout settings but no options exist for padding or margins.

I looked at other groups and elements, they all look okay, nothing seems to cause this but the page itself. It might be that I cloned that page from some other app in the past.

image
image1919×823 113 KB

Edit: So I get this extra white space on the page

image
image1918×994 106 KB

2

First thing I’d look for is a top hierarchy group that has padding/margins applied to it…

…but I guess you’ve already done that

3

It seems that there is a general group with all elements inside it. I say that because the page group never has padding and margin.

4

@douglas.epr that is the first thing I looked for. The issue is clearly on the page level.

I reported a bug.

5

Can you set your app in public view mode and share link to editor?

6

@Jici try this. The page affected is calendars-public

7

There’s a few thing to check. There’s fixed width on most “main” element. your page is set at 1200 width for design and groups are set to 1160 px. Leading to 20px each side “margin”

However, this is not the issue from what I see. Is this page was on legacy responsive designer and you converted to new responsive engine?

8

Thanks for taking the time.

I just changed all groups that were at 1160 to 0. Unchecked fixed width and it is not it. It is clear to me that once I click on the topmost page “calendars-public”, then the edges are grayed out and the margin/padding is there

9

Some pages in my app are copied from other apps. That is the only feasible explanation I can think of. When I transferred the page over from some other app, the space was there. Only some pages have this, not all.

I reported this as a bug

Edit: I am thinking, maybe clone the page. Likely I will try doing that

1 Like
10

For me, this is also a bug actually. The alert, focus group however are using the full width. Very strange.

1 Like
11

What I can suggest you is to group everything in a group, create a new page and copy (with workflow) the “main” group (not the whole page) and check if this solve your issue (keep the page for Bubble support to investigate the bug :wink: )

12

you could also add this to page header

<style>
.bubble-element.Page.baTjvn.main-page.bubble-r-container.flex.column {
    padding: 0px !important;
}
</style>

I can confirm after inspecting the body that the page itself have a padding of 20px 20px 300px
(the last 300 px is for debug mode… so this is normal)

1 Like
13

Lovely. That worked.

I noticed that the code you shared is only for this 1 single page. How do I apply it to other pages that are affected?

14

Probably

15

I’ll try

16

Thinking that it would be better to do:

<style>
.bubble-element.Page {
    padding-left: 0px !important;
    padding-right: 0px !important;
}
</style>

this shouldn’t affect bottom padding for debugger

17

How do I add multiple pages to this code? Instead of replicating this whole chunk for each single page

18

Oh sorry. You can go in settings and SEO/Metatags and add it to header

19

Where did you find this?

I tried .bubble-element.Page.calendars-public and it didn’t work

20

That’s exactly what I did. Trying to apply to multiple pages, or add multiple pages inside the same < style >