Updated: Optimise Bubble.io page heights for mobile screens

[@mrnickb]

Mate you are an absolute saviour! It's crazy to me that you need to do this much customisation for something that should be available out of the box. Thanks for showing how it's done.

[@cristiancisa]

Thanks for the tutorial Damian, it was really useful.

[@getnootropics]

awesome tutorial thanks for sharing

[@buildwithdamian]

Here are the code snippets: .fullHeight { height: 100vh !important; } .largeScreen { padding-top: 100px; } {addClass: "fullHeight"} {removeClass: "fullHeight"} {addClass: "largeScreen"}

[@anurouth2907]

Very useful tutorial, thank you

[@danielgandara5719]

Thanks for the tip man. I was looking for a way to add CSS to bubble.

[@Joselpztolu]

Muchas Gracias, excelente informacion.

[@MultiProbation]

Thanks for this great tutorial!

[@buildwithdamian]

my pleasure :)

[@pet5xxxf]

Thanks Damian! Please let me know what Chrome extension do you use to test mobile view?

[@buildwithdamian]

chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb?hl=en

[@pet5xxxf]

@@buildwithdamian many thanks!

[@buildwithdamian]

Check out my newsletter at bubblehacks.io if you want to build a mobile app on bubble and don't want to start from scratch, have a look at my bubble mobile template bubble.io/template/mobile-app--pwa-template-20-1586972825540x237128367982510080

[@denniscelen]

hi there, what are u using to visualize the different screen sizes?

[@cesarsfalcao]

Very useful

[@mirrowss5684]

Thank you for this tutorial

[@tibuigerard1564]

I'm confused here. I cannot get that to work. I realize that 'current page height' in your case is the height of the phone. but mine is taking 'current page height' from the height (1600px)defined on my page no matter what the current phone or viewport height is. The different 'pages' of my app are in fact groups which I filled up with empty collapsible groups so that there is no empty space below my 'pages'. So the empty group which you advise that we put only collapses when my page is below 1600 and expands when it is above that height. Is there something i've missed?

[@buildwithdamian]

strange. in my case it always takes the viewport height form 'CSS Tools Current Page Height'. Please check you did not use 'Available Height'. Worst case, you can have a look here kzbin.info/www/bejne/Z6isoqmGgcSVbdk and use CSS media queries instead

[@buildwithdamian]

you can also try an display the output of the CSS tools and then render it using responsive viewer to see if it works. see here: bubble.io/page?type=page&name=mobile_test&id=bh-examples&tab=tabs-1

[@tibuigerard1564]

@@buildwithdamian thanks a lot. I realized that if the onboarding is in a group, you have to put the csstools in that group for it to work.

[@MohamedMarzok-y8z]

we are No code and you want us to write codes ?