Footer position using CSS

Very often I run into this issue:

When I add elements/groups on a page, even when they are hidden and collapsed, the footer positioning becomes messed up. Sometimes the content overlaps the footer. Other times there is empty space above the footer. Is there was a way to control this better using a css function such as this?

http://cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/

Hey @katcabin-bubble :slight_smile: Is your footer a floating group or a group? I think using a floating group (float to bottom should work) no? If you can share a link to the editor I can take a look at what may be causing the overlap.

@fayewatson I do not have the footer as a floating group. I did not like the way it looked when the page is viewed on a mobile device because the footer blocks most of the body content when it is locked to the bottom. I am trying to take the next step in the Bubble environment but I keep hesitating because the design aspect scares me. I get more frustrated by things like this than any database challenges. I don’t want to have to troubleshoot extra white spaces and footer position every time that I add or remove content or add groups. Since this is a work in progress, I will constantly be adding and removing groups and I am afraid of getting frustrated each time.

Here is a link to the editor:

There is 3-4 inches of white space added above the footer that I am trying to remove. The home and about links show the same extra space.

I have three “collapse” groups that were working until I re-positioned all of my groups. Now they only help with removing white space above the “home” and “about” text.

Right, that makes sense about not having it be a floating group. :slight_smile: I just made all of the content visible and this is the space that remains in editor version above the footer:

Is this white space what you are trying to remove?

*I think it would also be best to make the nav bar a single, responsive and reusable element – instead of using two nav bar groups depending on screen width. It’s a little tricky to tell without seeing all of the steps in live mode, but you shouldn’t have to use extra groups to collapse parts of the page. If you want, I can create a new page in your app that is responsive, without the extra groups to test?

Yes that is the white space that I am referring to. Can you tell what is causing that space? Shouldn’t that space close up if there is nothing there and all groups are set to collapse?

I will be adding more content to the nav bar for different categories so I’m not sure that I will be keeping those yet.

Do you have a login that I could use so that I could see all of the other elements in preview mode? If you’d rather do this through message that works too! That space is there because it’s drawn out on the page; it’s part of the Group Home General’s size.

The group home’s size was just changed yesterday as a test to make it touch the footer. When I shorten it, it still does not close up the white space.

Hey @katcabin-bubble, one thing I noticed was that the extra white space you are seeing (when you view ‘My Profile’) is probably coming from the margin between the bottom of Group Profile (I turned it blue temporarily), and the footer:

Since Bubble tries to keep margins constant, it will keep that white space there because it’s the distance between that group, and the footer (regardless of what other groups have been collapsed). I think if you remove the extra groups you put to try to collapse that space, and then moved the footer up to the bottom of Group Profile – the margin you see (white space) won’t be there anymore.

Thanks @fayewatson I’ll try that. So if that works, and I need to add more content, I will have to keep moving the footer down?

Thanks for taking the time @fayewatson! I made some adjustments and I think I am in a better place. I appreciate the help!

No problem @katcabin-bubble! I was also thinking about those text elements which will be containing dynamic text - don’t worry about making them very large in the editor. Those will automatically expand depending upon the length of the dynamic text (unless you check the box in the text element to “cut content off”).

For example, if one text element has a large amount of dynamic text, and another has just 1/4th of it - they can be the same size in the editor and Bubble will do the work of making the text element larger if necessary in preview mode, without you needing to worry about resizing everything to fit all scenarios in the editor. As long as the texts are just large enough to fit the non-dynamic text in the editor mode, you’ll be set! :slight_smile:

Makes sense. Less stress! Thanks for the additional suggestion!

1 Like

My pleasure! :blush: If you have any trouble feel free to let me know!

1 Like