Group Focus: can't achieve full width

[artemzheg]

Hi all.
I’m trying to make a full screen width menu using group focus. My group focus reference element is a header:

My group focus has infinite max width:

But there is always a small fixed width gap (same size while resizing page in any direction) on the right between group focus and page border:

What am I missing?

[kazimdgoni]

Can you please try 100%width instead of pixel. Select ‘%’ instead of ‘px’ and type 100 in max width box. Check if it works.

[artemzheg]

Nope, hasn’t solved the issue.

[kazimdgoni]

What is the layout settings of the focus group and page?

[artemzheg]

Both have “Column” layout.

[kazimdgoni]

Is there any padding margin on anything?

[artemzheg]

No margins and paddings on group focus and reference element.

[tylerboodman]

Maybe try overriding with some CSS

[kazimdgoni]

Did you try with different browser layout. I mean minimize the browser window to understand the behaviour. As I found Group focus has limitations in terms of responsiveness. Please check this

Understanding Bubble Groups | In-depth Guide On All 5 Types

[artemzheg]

Yep, this is a thing to experiment with if I will not be able to resolve my issue. But for now I’m trying to understand am i doing something wrong or is this a bug/feature of Group Focus.

[artemzheg]

It seems I’ve found the solution (thanks to @kazimdgoni for reminding me to change px → %).

At first I’ve tried this setup:

I was expecting Group Focus to behave like an ordinary Group element (which is fully responsive with such a setup). But the gap was still there on the right:

Then I’ve also made min width = 100% and it worked:

So here are two options for making Group Focus full page width:

1. If Group Focus is not fixed width: make both min width and max width equal to 100%
2. If Group Focus is fixed width: make width = 100%

[kazimdgoni]

Great

[artemzheg]

I’d like to update this thread in case someone else will face the issue I’ve described in my first post here .
I’ve sent a ticket to Bubble support team and got a response. This small gap is a margin of 20px hardcoded for Group Focus element (this margin is developed to have a place for user to click to close/hide group focus).

As a workaround we can use shadow style of the Group Focus:

1. Change “Shadow style” from None to Outset
2. Make horizontal offset = 20px
3. In “Boxshadow color” field choose the same color as used for your Group Focus

As a result Group Focus will be displayed as a full page width element

[kazimdgoni]

Thank you very much for sharing the updates.