Javascript column resizing only working when page is refreshed

Question

Hi — I've inherited a website that has a little javascript script that isn't working properly. I didn't code it myself and am a javascript n00b, so please forgive my ignorance.

The site switches from 3-column view to 1-column view depending on window size, and there's a script to make one particular section of the site convert neatly between the two views (by setting the column heights such that they stack neatly). I've noticed that if I resize the window without refreshing, the column heights fail to adjust. How can I fix this?

Thanks!

<script type="text/javascript">
            function adjust_col_heights() {
                if (window.innerWidth > 991) {
                    var col_1_height = document.getElementById('col-1').clientHeight;
                    var col_2_height = document.getElementById('col-2').clientHeight;
                    var col_3_height = document.getElementById('col-3').clientHeight;
                    console.log("adjusting heights from:", col_1_height, col_2_height, col_3_height);
                    var col_max_height = Math.max(Math.max(col_1_height, col_2_height), col_3_height);
                    var css_height = col_max_height + "px";
                    document.getElementById('col-1').style.height = css_height;
                    document.getElementById('col-2').style.height = css_height;
                    document.getElementById('col-3').style.height = css_height;
                    document.getElementById('poem').style.position = "absolute";
                }
                else {          
                    document.getElementById('poem').style.position = "relative";
                }
            }
            adjust_col_heights();
            window.onresize = adjust_col_heights;
        </script>

Answer 1

window.onload = function () {
        resizeElements();
        window.addEventListener('resize', resizeElements);
 }

 function resizeElements() { ... }