100% Height Full Screen in Bubble.io
In this Bubble tutorial we demonstrate how you can use a few lines of CSS to force pages in your Bubble app to be height responsive, 100% height, 100% viewport.
Unlock full-screen magic: Learn how to create a responsive sidebar that spans the entire viewport height in Bubble!
Master Bubble's layout secrets: Discover how to anchor elements to the bottom of your page using custom CSS tricks!
Elevate your Bubble designs: Transform your sidebar with this simple responsive technique for a sleek, professional look!
Creating a Full-Screen Sidebar in Bubble.io
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 not 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 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 planetnodecode.com.
Implementing the Full-Screen Sidebar
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 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?
Setting the Height to 100%
So one way I've got that going is by showing that my height here is a hundred percent 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 Bubble our container.
Overriding Bubble's Default Behavior
Now this is this approach you know 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 Bubble our container 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 a hundred percent viewport height and then just because we're really having to force it because Bubble wants to set its own height for the page we add in important that's saying that this CSS statement here takes precedent over any others.
Conclusion
Like I say this is a little bit kind of brute force so it might break might work in the future but it does allow you to get a nice height responsive design just like this.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
3 ways we support solopreneurs
Our team is here to help, with a combined 30+ years working for internet startips.
Learn Bubble
Explore our library of 300+ Bubble and no code tutorial videos. Watched by over 800k no coders on YouTube.
Bubble Coaching
Troubleshoot your Bubble app and build new no code features with our in house Bubble expert.
Mastery
Ready to take your SaaS idea to the next level? Join our exclusive Mastery program for personalised content & mentoring.