My footer is fine on the laptop device…
However on tablet… it gets further away from the main page moving downwards…
Even more further down on mobile in horizontal view…
And even more further down…
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?
Is it a regular group? Try using a floating group that is positioned to float at the bottom of the page.
How do i do that? Yes the footer is a regular group
In the menu of the editor - Containers - Floating Group
Ive already grouped these elements.
Ive drawn a floating group but dont know how to incorporate the elements into it?
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?
Did you by chance move the elements into the floating group?
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?
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.
do we have any more info about that?
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