Question

对于此网站：http://www.insidemarketblog.com - 您可以看到，当您将窗口大小调整为平板电脑尺寸时，侧边栏会移至底部，但主要内容会保留其大小。

我想要做的是当窗口调整大小并且侧边栏位于下方时，主要内容会填满整个窗口（不再有黑色空间）。请将此大小调整为示例：http://www.quicksprout.com/blog/

我以为我正确设置了@media，但它无效。有任何想法吗？

CSS：

   /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
        @media only screen and (min-width: 480px) and (max-width: 767px) {
        .wrap {max-width: 100%}
           .grt {font-size: 100%;}
        }

    /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
    @media only screen and (max-width: 479px) {
    .wrap {max-width: 98%;}
     .grt {font-size: 87.5%; padding-right: 20px; padding-left: 20px;}
    }

HTML：

<div class="content">
<div id="post-1" class="post_box grt top" itemtype="http://schema.org/Article" itemscope="">
<div id="comments">
<div class="prev_next"></div>
</div>

Answer 1

从此处删除max-width:532px;属性：

.container, .landing .container {
width: auto;
max-width: 532px;
}

Answer 2

您需要将样式移动到相应的媒体查询块：

@media all and (max-width: 532px){
   .container, .landing .container{width:auto;max-width:532px}
}

CSS响应问题

2 个答案: