Trying to tackle the challenge of making my footer stick to the bottom of the page on smaller screens has been quite troublesome. As a temporary fix, I decided to experiment with hiding the div entirely until I figure out a proper solution.
The HTML
<div class="sitefooter">
<div class="container">
<div class="row">
<div class="col-md-4">
code
</div>
<div class="col-md-2 col-md-offset-1">
code
</div>
<div class="col-md-2 col-md-offset-1">
code
</div>
</div>
<div class="row top20">
<div class="col-md-4 col-md-offset-4 col-xs-6" style="text-align:center;">
code
</div>
<div class="col-md-4 col-xs-6" style="text-align:right;">
code
</div>
</div>
</div>
</div>
I've attempted various approaches such as adding xs-hidden to each col-md div, wrapping the entire structure in xs-hidden, and testing individual parts separately but none resulted in hiding the div on small viewports.
I did successfully test xs-hidden on a different element of the website, which worked fine, but for some reason, it's not functioning correctly here.
The CSS
.sitefooter {
bottom: 0;
position:absolute;
background:url(../img/headerbg.png);
width: 100%;
height:287px;
padding-bottom:20px;
}
.sitefooter>.container>.row>.col-md-3>p, .sitefooter>.container>.row>.col-md-4>p, .sitefooter>.container>.row>.col-md-2>p {
font-size:14px;
padding-top:10px;
color:#CCC;
padding-bottom:15px;
}
.sitefooter>.container>.row>.col-md-3>h3, .sitefooter>.container>.row>.col-md-4>h3, .sitefooter>.container>.row>.col-md-2>h3 {
font-size:20px;
padding-top:20px;
color:#408af0;
}
.sitefooter>.container>.row>.col-md-3>a, .sitefooter>.container>.row>.col-md-4>a, .sitefooter>.container>.row>.col-md-2>a {
color:#999;
font-size:14px;
}
.sitefooter>.container>.row>.col-md-3>a:hover, .sitefooter>.container>.row>.col-md-4>a:hover, .sitefooter>.container>.row>.col-md-2>a:hover {
color:#fff;
font-size:14px;
}
.top20 { margin-top:20px; }
The ideal scenario would be to have a sticky footer across all viewports, but for now, I'm settling for this compromise.
If anyone can spot what I might be missing or doing incorrectly here, any help would be greatly appreciated!