css - 如何正确使用Media Query使一列消失而另一列调整为屏幕宽度？

在我的课堂上，我们开始使用媒体查询，并且在分配作业时遇到了一些麻烦。对于以前的工作，我们的任务是尽可能地重建一个名为“ The Toast”的网站，我拥有here。现在，对于此分配，我们将使用媒体查询来做一些事情：


  这项任务是关于媒体查询和使您的网站成为
  反应灵敏。我们将再次使用网站Toast
  分配。您将为内容区域布置两列。
  当屏幕尺寸达到960px时，右列必须消失。的
  左栏中的文章必须调整为屏幕的宽度。
  图片必须更大，并以960像素填充文章。
  
  760像素的“支持我们”按钮，喜欢祝酒词和社交
  媒体必须消失。


在代码中，我有两列，分别是“ bigColumn”和“ adColumn”。现在，根据我的理解，使该列消失并调整bigColumn，我只需要添加：

@media only screen and (max-width: 960px) {

  .main {

    .bigColumn {
      width: 100%;
    }

    .adColumn {
      display: none;
    }
  }
}

但是，这不起作用。广告永远不会消失，并且在缩小窗口时，其余内容对填充页面的其余部分没有任何作用。如果我更改.main中的背景颜色，则颜色会更改，但是更改两个div中的任何内容都不会产生任何效果。我可以使社交媒体图标消失在760px，这很好，所以我是否只是缺少媒体查询列的内容？还是可能有其他干扰？

编辑：猜猜我应该提到是的，我的确在项目中使用了SASS。
在开始媒体查询之前，这是各列的样式：

.main {
  width: 90%;
  display: flex;
  min-height: 200px;
  margin: 0 auto;
//column for main-page content
  .bigColumn {
    width: 800px;
    height: 100%;
    margin-top: 20px;
    margin-right: 9%;
    margin-left: 13%;
    }
.adColumn {
    margin-top: 20px;
    position: relative;
    min-height: 120px;

  }
}

最佳答案

我不相信除非像LESS或SASS这样的预处理器，否则您不能像这样嵌套CSS。尝试将.bigColumn CSS移出.main括号，然后自行保留。

@media only screen and (max-width: 960px) {

  .bigColumn {
     width: 100%;
   }

   .adColumn {
      display: none;
   }

}

关于css - 如何正确使用Media Query使一列消失而另一列调整为屏幕宽度？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53125449/