Gradient Background not Covering All of a Responsive Page

Hey all, posting here to see if it behaves like this on anybody else’s mobile device before filing an official bug report. If you head to enscope.bubbleapps.io/version-test/pricing-beta on your mobile device, you should see the background cut off and leave the bottom portion of the page white. I’m really, really hoping this isn’t intended behavior, as I have the page’s responsiveness functioning as intended otherwise. Here’s an image I’m seeing on my Google Pixel XL:

The top half of the page has the gradient, the bottom half of the page is just white. Any ideas if this is intended? I definitely do not want to make the page taller, that’ll just leave a crap-ton of empty space on the desktop page.

I just tried on my phone and it’s showing the white there as well. I also tried to recreate in a test page and it worked fine there (without any elements). Hmm… are the plan types a repeating group or three different groups?

*Debug is showing that the white area is the ‘container desktop’ element and that that element has a white background

Interesting. The container has a background style set to “none,” it’s supposed to just be clear and rely on the page style. The plans are 3 separate groups inside the “Container Desktop.”

I think I’d classify this as a bug. I’d expect the “page” element to span the entire page, not quit partway through. I’ll file a report. Thanks for poking!

No problem! :slight_smile: Yeah I figured you had the background to be clear at all times!

I’m fixing this issue with a workaround. When the page width is narrower than a certain value, I’m changing the Background of the Container Desktop to replicate the gradient. It’s a hack, but it gets rid of the white.

1 Like

Did you flag this in a bug report and they said they couldn’t fix? I’ve noticed the same thing.

I’ve also noticed the same thing at the bottom of the screen.