Проблема с @media CSS не работает только в портретном режиме?

Question

Я боролся с книжным представлением iPad на сетке сообщений на моем сайте.Сетка выглядит отлично во всех других представлениях, кроме этой, где сетка появляется в крайней правой части контейнера.

CSS (темы) Александры выглядит следующим образом:

@media only screen and (max-width: 941px) and (min-width: 768px).container {width: 726px;}

Я пытался изменить это с помощью:

@media only screen and (min-device-width: 768px) and (max-device-width: 941px) and (orientation:portrait) .container {width:510px;}

И:

 @media only screen and (min-device-width: 768px) and (max-device-width: 941px) and (orientation:portrait) { .container {width:510px !important;}}

Также:

 @media only screen and (min-device-width: 768px) and (max-device-width: 941px) and (orientation:portrait) { .container {margin-right: 200px;}

А также несколько других конфигураций и ничего не происходит.Любые идеи о том, что мне не хватает или почему это не работает или ничего не меняет?Большое спасибо за чтение!Любое понимание очень ценится!

Answer 1

В HTML5 появился метод, позволяющий веб-дизайнерам получить контроль над окном просмотра через тег <meta>.

Поэтому вы должны добавить в index.html этот мета:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">