Nested Floating Group 100% Page Width

Need help Responsiveness
1

Is there anyway we could have a floating group inside a reusable element to take up 100% page width and page height?

2

Yeah, make it 100% fixed width and height

3

If the above doesn’t work for your use case, you can set a page element to page width/height using “vw” or “vh” in CSS.

#elementId {
  width: 100vw;
  height: 100vh;
}

This is viewport width/height, and is responsive to device screen size.

4

@johnny Thanks for the response! Let me elaborate more - the reusable element here is not 100% page width & length itself. Is there anyway to make it so the floating group can still be 100% page width & height whilst the parent reusable is not?

5

Thanks @ed19 - the reusable element here is not 100% page width & length itself. Is there anyway to make it so the floating group (child element) can still be 100% page width & height when the parent reusable is not?

6

Yep that was my assumption, the css provided in my previous response will work for any element on the page, as (unlike %) it ignores the constraints of parent elements. Comes with its own set of issues to work around, but should set you on the path to a solve.

You may need to set elements’ positions to absolute in order to get it centred, as this will adjust the size but not the positioning.

7

I actually lied a little, did a quick test and there’s a little more to it. Made an example, not too difficult to implement. CSS needs to be adjusted to the following:

<style>
/* remove default page margins as they will affect width */
    .Page {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    
/* reset positioning of the reusable, as absolute elements (the floating group) anchor to the first positioned parent */
    .CustomElement.baTaHaCaN /* your element selector will be different */ {
    	position: static !important;
	}

/* bubble sets width/height using all of the below, so all affect size changes */    
    #fg_viewport {
    	width: 100vw !important;
        height: 100vh !important;
        min-width: 100vw !important;
        min-height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
    }
</style>

Apologies for the grotesque number of important tags, I got mad at bubble and gave up trying to write CSS properly, it’s an easy way out. You could probably achieve the same by using more specific selectors (which is generally better practice, though may not matter in your use case).

Editor:

Page:

1 Like
8

Wow thanks @ed19! Yep it seems the !important tags are a must have to overwrite css on Bubble. It took too long with just css I had to use custom JS + CSS with the popup element instead for it to work.

I’ll have a test with your CSS only method which is definitely better for page performance. Once again, thanks for going into detail with this topic!