У меня есть страница опроса с background-color: red
и меньшим контейнером для хранения содержимого опроса, как в примере ниже с рабочего стола:
![desktop view of survey page](https://i.stack.imgur.com/7LVD7.jpg)
Теперь я использовал эти @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](https://i.stack.imgur.com/lbmgS.png)
Почему мой контейнер все еще не покрывает всю страницу?
Полный HTML-код здесь, страница giants-survey.html: https://glitch.com/edit/#!/jdipasquale