JS if/else statement to adjust window height not working

Question

Short Version: Do you see any errors in this if/else statement?

<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>

What I need it to do is check the width of the document and adjust the height of the page accordingly. If document > 1161px wide, height = 8500px. Otherwise, height = 12800px.

Full Version: I am working on a site that has a repeating image in the left sidebar and a photo gallery in the main content. When the user clicks "See More" at the bottom, more images appear. When this happens I need the image in the left sidebar to extend the full height of the page. It seems to work fine on my PC, but not on an iPad. Specifically, the page loads with the correct height but when I click on "See More", the if/then statement isn't working, so it's pulling the height from the "if" rather than the "else".

The staging site can be viewed here.