JS if/else оператор для настройки высоты окна не работает

Question

Короткая версия: Видите ли вы какие-либо ошибки в этом операторе if/else?

<script type="text/javascript" charset="utf-8">
     function more() {
        document.getElementById("more").style.display = "flex";
        if (window.matchMedia('screen and (min-width: 1161px)')){
           document.getElementById("sidebar2").style.height = "8500px";
        } else {
           document.getElementById("sidebar2").style.height = "12800px";
        }

        document.getElementById('moreBtn').style.display = "none";
     }
  </script>

Что мне нужно сделать, это проверить ширину документа и соответственно отрегулировать высоту страницы. Если документ> 1161 пикселей в ширину, высота = 8500 пикселей. В противном случае высота = 12800 пикселей.

Полная версия: я работаю над сайтом с повторяющимся изображением на левой боковой панели и фотогалереей в основном контенте. Когда пользователь нажимает "Подробнее" внизу, появляются другие изображения. Когда это происходит, мне нужно изображение на левой боковой панели, чтобы увеличить всю высоту страницы. Кажется, он отлично работает на моем ПК, но не на iPad. В частности, страница загружается с правильной высотой, но когда я нажимаю "See More", оператор if / then не работает, поэтому он вытягивает высоту из "if", а не "else".

Постановочный сайт можно посмотреть здесь.