html - CSS 响应问题

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;
}