@media查询 - css重复不呈现

时间:2013-02-13 15:13:54

标签: html css media-queries

希望有人可以提供建议

在横向模式(480px)的平板设备上重复我的页脚包装有问题

HTML

<div id="footer-wrap">
    <footer class="footer-inner">
        <section class="foo1">
            <h1>Get in Touch</h1>
            <hr>
        </section>
    </footer>
</div>

CSS

#footer-wrap {
  background: none repeat #373737;
  min-height: 400px; }

.footer-inner {
  width: 940px;
  margin: 0 auto; }

在我的头脑中

最初我没有在媒体查询中定位#footer-wrap,因为我认为因为它只包含BG颜色而没有其他属性,所以从主样式表拉出就足够了

我尝试在媒体查询中添加

@media only screen and (min-width: 480px) and (max-width: 767px){

    #footer-wrap {
            width: 100%; /*with the intention of just filling the div*/
         }
    }

也试过

#footer-wrap {
        width:767px;
    background: none repeat #373737;
     }

两者都没有效果

任何人都可以提出建议,我确信答案会让我感到震惊,但是我不能让我的生活明白这一点,因为我正在这个项目上落后

非常感谢提前

约翰

2 个答案:

答案 0 :(得分:0)

在媒体查询中: -

@media (max-width: 767px){

#footer-wrap{

margin-left: -20px;
margin-right: -20px;

} }

答案 1 :(得分:0)

我想我可能会添加如何完全解决,如果不是为了关闭,但也许可以帮助其他人

页脚容器需要最小宽度100%

这就是...... 3个血腥的小时,而这就是它所需要的一切

可能会帮助那些和我一样迷茫的人

问题已完全解决并完成

R

约翰