bump on this solution, I still haven’t found one from Bubble
Custom CSS + the Classify plugin by @julienallard1.
The .main-page
part makes the whole page fit to the height of the viewport
The .full-height
class you put on any specific element that you want to also want as 100% height of it’s container. (You’ll need to use Classify to do this)
(this is just a (hidden) HTML element with a height and width of 1)
Not sure what is on @Bubble’s roadmap but full height pages seem like a pretty standard thing for websites cc @allenyang
What do you want to achieve?
I’m trying to do the same but not getting the result yet.
Where should I write the custom CSS script? I did add the Classify plugin.
@julienallard1 I’m trying to get my visible group height to match the viewport height. Would you be able to post a simple example with that goal?
I’ve tried this code that @boston85719 shared
But I still have a white strip at the bottom of my page that won’t go away for some reason (even though my backgound isn’t white) on long iphones. Any ideas?
What is on the bottom of the page in the editor?
Nothing. The whole page is stacked groups that hide / show based on custom states
What is that floating group you have at the bottom for the chat messenger?
Using Crisp. It’s some code in my header
I’m not too sure but I once read that the viewport itself can have some padding by default.
Try adding this to your CSS:
body {
padding: 0;
}
If it does not work try replacing body
with document
or window
or html
.
I’d venture to say that is what that white space is…but somebody else more knowledgeable about code could tell you what it is.
You think it might be caused by the Crip code?
Thank you @julienallard1 - I should add that code within my style tag of the HTML element? (hoping something else because looks like it didn’t work)
I would follow Julliens advice, and if it persists, I’d consider looking at the code you use for the Crip and see if there is white used as a color for a group element that is probably the floating container, but I don’t know I’ve never used the Crip code for a chat messenger.
I removed the crisp code to test, but issue persists it was a good idea. i’m inspecting everything now along those lines (looking for white stuff)
That’s right.
Perhaps you could also include border-width: 0;
and margin: 0'
just in case?
Darn no dice. Appreciate your help all the same!
Do you know how to use the developper tools in your browser? The selection tool to inspect elements on the page would probably be of help… On macOS, the shortcut to enable the tool is SHIFT+CMD+C
That’s a great idea. Here’s the tricky part… I’m using BDK Native. The issue only occurs when viewing our mobile app. When we view in browser with iPhone simulated settings, the white space doesn’t appear. I don’t suppose there’s a way to use the developer tools on an app is there?