How to optimise your Bubble.io page heights for mobile screens: Part 2 (Make it even nicer)

A short tutorial on managing element positioning in Bubble.io to make your app look really good on different mobile screens using:
* CSS media queries
* CSS calc()
This tutorial includes vertically centering elements as well as mimicking Bubble's floating group behavior for regular Bubble groups and elements.
Here is part 1 (I highly recommend watching part 1 before watching this video): • Updated: Optimise Bubb...
Linke to Bubble editor for copying my CSS code: bubble.io/page...
Further resources:
* My newsletter: bubblehacks.io
* My bubble mobile template: bubble.io/temp...
* Chrome Responsive Viewer Extension: chrome.google....
Further reading:
* CSS box model: www.w3schools....
* CSS media queries: www.w3schools....
* CSS calc(): developer.mozi...)

[@mirrowss5684]

Clean and straight forward as always.

[@idrisabdulwahab8378]

Thank you so very much for this holy grail tip!!! I couldn’t get this problem solved with a plugin. I appreciate this tip so very much. 👍

[@MariusCiocirlan]

Love it! I was looking for this exact solution.

[@CranfordTech]

Really great. Thanks Damian!

[@benme2253]

Hi Damian! Its Bence.... I am struggling with this because I have a bit more complex structure in my APP. I doubt that I can solve this issue and I am looking for somebody who could help me by viewing my screen online. Of course I dont want it for free but I would really need some help. Would you be interested to give advice like this?

[@idrisabdulwahab8378]

Can one use this with the old Bubble responsive engine?

[@buildwithdamian]

Yes it’s specifically made for the old one. On the new one CSS won’t be needed for this.

[@AhmedKhodir-novyPro]

I am trying the same approach for a webapp but it is not working

[@AhmedKhodir-novyPro]

had to change the code to
.fullHeight {
height: 100% !important;
}
which made it work but don't know how that will affect the rest of the design "fingers crossed"