Group Focus: can't achieve full width

Hi all.
I’m trying to make a full screen width menu using group focus. My group focus reference element is a header:
Screenshot 2023-02-04 at 23.37.01

My group focus has infinite max width:
Screenshot 2023-02-04 at 23.38.59

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?

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

Nope, hasn’t solved the issue.

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

Both have “Column” layout.

Is there any padding margin on anything?

No margins and paddings on group focus and reference element.

Maybe try overriding with some CSS

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

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.

1 Like

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

At first I’ve tried this setup:
Screenshot 2023-02-05 at 00.45.27
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%
1 Like

Great :+1::dart:

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:
Screenshot 2023-02-09 at 22.24.08

  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 :slight_smile:

Thank you very much for sharing the updates.