Footer keeps moving downwards

Need help
1

My footer is fine on the laptop device…

Pasted image1366×768 237 KB

However on tablet… it gets further away from the main page moving downwards…

Pasted image1366×768 163 KB

Even more further down on mobile in horizontal view…

Pasted image1366×768 158 KB

And even more further down…

Pasted image1366×768 124 KB

Could someone let me know as to why my footer keeps moving downwards as the page changes please.

Is there something I have to do to it, in terms of being responsive?

2

Is it a regular group? Try using a floating group that is positioned to float at the bottom of the page.

3

How do i do that? Yes the footer is a regular group

4

In the menu of the editor - Containers - Floating Group

5

Pasted image1366×768 169 KB

Ive already grouped these elements.

Ive drawn a floating group but dont know how to incorporate the elements into it?

6

Pasted image1366×768 169 KB

Ive changed it to a floating group and made it float to the bottom. However… it is still doing the same thing as before. Please help?

7

Did you by chance move the elements into the floating group?

1 Like
8

It will be easier to assist you if we could see what you’ve done in the app. Can you provide us with a link?

1 Like
9

Just to reopen this topic. Did anyone find a solution to this (other than floating groups). I have found this online and wondering how can this be added to Bubble? Maybe @emmanuel or someone else from the team can have a look. I believe its simple to add

http://54.67.6.95/how-to-keep-footer-at-bottom-of-page-with-css/

Example
http://www.cssreset.com/demos/layouts/how-to-keep-footer-at-bottom-of-page-with-css/#help

Source Code CSS

/**
 * CSSReset.com - How To Keep Footer At Bottom of Page with CSS
 * 
 * Original Tutorial: http://www.cssreset.com/2010/css-tutorials/how-to-keep-footer-at-bottom-of-page-with-css/
 * License: Free - do whatever you like with it! Credit and linkbacks much appreciated.
 *
 * NB: Make sure the value for 'padding-bottom' on #content is equal to or greater than the height of #footer.
 */
html,
body {
	margin:0;
	padding:0;
	height:100%;
}
#wrapper {
	min-height:100%;
	position:relative;
}
#header {
	background:#ededed;
	padding:10px;
}
#content {
	padding-bottom:100px; /* Height of the footer element */
}
#footer {
	background:#ffab62;
	width:100%;
	height:100px;
	position:absolute;
	bottom:0;
	left:0;
}

Source Code HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>How To Keep Your Footer At The Bottom of The Page - CSSReset.com</title>
	
	<link rel="stylesheet" type="text/css" href="style.css" />	

	<!--[if lt IE 7]>
		<style type="text/css">
			#wrapper { height:100%; }
		</style>
	<![endif]-->
	
</head>

<body>

	<div id="wrapper">
		
		<div id="header">
		</div><!-- #header -->
		
		<div id="content">
		</div><!-- #content -->
		
		<div id="footer">
		</div><!-- #footer -->
		
	</div><!-- #wrapper -->
	
</body>

</html>

Maybe we can have only the CSS added to be used in the group element and exposed as an option.

10

do we have any more info about that?

11

I have this problem as well. I’ve got a reusable chat box at the bottom and works great on desktop, but when you to to mobile it’s too far down

1 Like