I'm in the process of trying to optimize a website I'm working on for mobile users. While working on the site, I noticed that on very small screens (specifically 450px and less wide) my footer breaks and is no longer stuck to the bottom of the page.
I believe the culprit to be something to do with the #viewWrapper div but after inspection through the chrome console and messing around with it (position, physical size, etc..) for a few days I have yet to find a solution to it.
Any help is appreciated. Here is the link to the page in question:
http://mhtc-vm1.cs.wpi.edu:8080/test/explore
Structure of the page:
<body>
...
<div class="container-fluid-full">
...
<div id="content">
...
<div id="viewWrapper">
...
</div>
</div>
</div>
<footer>...</footer>
</body>
Some relative CSS:
@media only screen and (max-width: 450px) {
#viewWrapper {
left: 0px;
}
}
#viewWrapper {
position: absolute;
top: 180px;
left: 450px;
right: 0px;
bottom: -160px;
overflow: hidden;
border: 0;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
display: block;
}
.site-footer {
position: relative;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 999;
padding: 10px 0px !important;
clear: both;
display: block;
}
you may want to write