another possible solution, just using media queries
@media screen and (min-width:1px) and (max-width:767px) {
.footer {
}
}
/* no style for smaller or else it goes weird.*/
@media screen and (min-width:768px) and (max-width:991px) {
.footer{
bottom: 0;
width: 100%;
position: absolute;
}
}
@media screen and (min-width:992px) and (max-width:1199px) {
.footer{
bottom: 0;
width: 100%;
position: absolute;
}
}
@media screen and (min-width:1120px){
.footer{
bottom: 0;
width: 100%;
position: absolute;
}
}