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.
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?
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 ua-cam.com/video/1wIqvPL_b7w/v-deo.html and use CSS media queries instead
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
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
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.
Very useful tutorial, thank you
Muchas Gracias, excelente informacion.
Here are the code snippets:
.fullHeight {
height: 100vh !important;
}
.largeScreen {
padding-top: 100px;
}
{addClass: "fullHeight"}
{removeClass: "fullHeight"}
{addClass: "largeScreen"}
Thanks for the tutorial Damian, it was really useful.
awesome tutorial thanks for sharing
Thanks for the tip man. I was looking for a way to add CSS to bubble.
Very useful
Thanks for this great tutorial!
my pleasure :)
Thank you for this tutorial
Thanks Damian!
Please let me know what Chrome extension do you use to test mobile view?
chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb?hl=en
@@buildwithdamian many thanks!
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?
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 ua-cam.com/video/1wIqvPL_b7w/v-deo.html and use CSS media queries instead
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
@@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.
we are No code and you want us to write codes ?
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
hi there, what are u using to visualize the different screen sizes?