移動@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%使其起作用。