Question

希望有人可以提供建议

在横向模式（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;
     }

两者都没有效果

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

非常感谢提前

约翰

Answer 1

在媒体查询中： -

@media (max-width: 767px){

#footer-wrap{

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

} }

Answer 2

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

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

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

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

问题已完全解决并完成

R

约翰

@media查询 - css重复不呈现

2 个答案: