移动@media查询无法使容器覆盖整个屏幕

Question

我有一个调查页面，其中有一个background-color: red和一个较小的容器来容纳调查内容，如下面的示例在桌面上所示：

现在，我已经使用这些@media查询来尝试使白色容器覆盖电话上的整个页面（因此整个页面都是白色容器，没有红色背景）

@media (max-width: 600px) {
  #survey-container {
    width: 100%;
    padding: 0px;
    }
  }
  @media (max-height: 800px) {
  #survey-container {
    height: 100%;
    padding: 0px;
    }
  }

现在，这些查询似乎对手机没有任何影响，因此显示以下页面：

为什么我的容器仍不能覆盖整个页面？

此处提供了完整的HTML代码，giants-survey.html页面：https://glitch.com/edit/#!/jdipasquale

Answer 1

@import url(https://fonts.googleapis.com/css?family=Raleway:400,500) }

此字体导入末尾的括号导致@media查询不起作用，将其删除并添加min-width: 100%使其生效。