Мобильный запрос @media не заставляет контейнер закрывать весь экран - PullRequest
2 голосов
/ 14 марта 2019

У меня есть страница опроса с background-color: red и меньшим контейнером для хранения содержимого опроса, как в примере ниже с рабочего стола:

desktop view of survey page

Теперь я использовал эти @media запросы, чтобы попытаться сделать так, чтобы белый контейнер покрывал всю страницу на телефоне (так что вся страница - это белый контейнер, а не красный фон)

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

Теперь эти запросы, по-видимому, не влияют на мобильный телефон, давая мне эту страницу:

mobile view of survey page

Почему мой контейнер все еще не покрывает всю страницу?

Полный HTML-код здесь, страница giants-survey.html: https://glitch.com/edit/#!/jdipasquale

1 Ответ

1 голос
/ 14 марта 2019
@import url(https://fonts.googleapis.com/css?family=Raleway:400,500) }

Скобка в конце этого импорта шрифтов приводила к тому, что запросы @media не работали, удаляя его и добавляя min-width: 100%, он работал.

...