From within the Bubble editor, you can't set a responsive height for a page. What I mean by that is, look at, I've got this sidebar here, I've got an icon at the top, like my logo, and I've got a logout button at the bottom. And I want to make sure that logout is always anchored to the bottom of the page. So let me show you how I've done that.

Best way to learn Bubble

But before I do so, if you're learning Bubble and you want to access hundreds of Bubble tutorial videos, many of which you cannot find on YouTube, you need to check out our website, Planet No Code. planetnodecode.com.

Understanding Viewport Height & CSS in Bubble

But let me show you how I've done this with just a few lines of custom CSS. By going onto the page, let me just express the layout here. I've got my page as a row, and I've got my group here acting as my sidebar. That's set as a column, and I have the container alignment space between. That's how it's forcing the login right down to the bottom. But how is it that I'm making sure that the sidebar expands to fit the full viewport height. So one way I've got that going is by showing that my height here is 100%. That then delegates up the overall height to a container on the page. So if I'm in my browser here and I'm just going to right click on the page, bring up the inspect tools, here they are. And I am looking for this one here. This is the class in CSS that I want to override, BubbleRContainer.

Now this approach, we're kind of bending Bubble against what Bubble provides us the tools to do, so this might change, it might become broken at some point, but for now, you can take this class, BubbleRContainer, and in settings, go to your SEO settings, and you can add in code just like this, which is basically setting a CSS override, a style override. And we're saying that take the Bubble, our container element on the page, and force its height to 100% viewport height. And then, just because we're already having to force it, because Bubble wants to set its own height for the page, we add an 'important'. That's saying that this CSS statement here takes precedence over any others. Like I say, this is a little bit kind of brute force, so it might break, it might not work in the future, but it does allow you to get a nice height responsive design just like this.