DIV ID的媒体查询

Question

我使用下面的CSS强制页脚到页面底部

#bump {
margin-top: 50px;
height:150px;
}

#footer {
padding-top: 5px;
min-height: 150px;
background-color: #284602;
color: #ecf0f1;
position:absolute;
bottom:0;
width: 100%;
}

这适用于中型或大型屏幕设备，在较小的设备上，但是页脚可以最终覆盖内容（响应式页脚在小型设备上生长并有效地翻倍）。所以我想我可以在style.css的末尾使用媒体查询：

// Small devices (landscape phones, less than 768px)
@media only screen and (max-width: 768px) {


#bump {
    margin-top: 50px;
    height:300px;
}
#footer {
    padding-top: 5px;
    min-height: 300px;
    background-color: #284602;
    color: #ecf0f1;
    position:absolute;
    bottom:0;
    width: 100%;
}

}

它不起作用 - 我误解了什么吗？媒体查询位于我的文档末尾，查看开发人员工具，它仍然认为在一个小屏幕上高度为150PX。

想法？感谢