I have 2 issues related to a footer section.
I’m struggling to see how to make a footer sticky and pinned to the bottom of the screen. A search of “sticky” in the weweb documentation was fruitless.
I have a button that’s hanging outside of it’s parent container even though the button is set to 100% width. Can someone tell me how to fix this?
I made a quick loom video to describe my issues. Loom | Free Screen & Video Recording Software | Loom
I’ve been waiting on a masterclass with regards to layout. As I started getting a more complex design I’ve had a hell of a time getting elements where I want them (and to contain an element within its parent element).
So I’m not the best person to ask but for what it’s worth, to get the Footer to the bottom, I’ve resolved to this;
Footer Section
Container inside the Footer
Main Section
Set the height of the main section to take up the viewport height and subtract the height of your Header and Footer) eg
Thanks SO much Michael. I’m so glad to hear that I’m not the only one who struggles with building layouts in weweb! It’s taking me so long to build my SAAS app (100+ screens) cause I have issues like this on virtually every screen. There is definitely a need for a master class with regards to layout. I’ve been trying to convince Gregory John [ @_gregoryjohn on twitter] to do a course on weweb. He’s an outstanding teacher of the bubble platform, and he would be perfect to do that class.
@MichaelLovell , this has allowed me to fix the footer to the bottom of the screen, but the calc for the height of the main section is not working for me. I set the main section height to calc(100vh - (58px + 18px)) as you suggested [replacing my actual header and footer dimensions] but i get a current value of “INVALID OR UNEXPECTED TOKEN” . I get this whether or not I include your quotation marks. Is there something obvious I’m doing wrong?
