title: Javascript column resizing only working when page is refreshed
body: <p>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.</p>
  <p>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?</p>
  <p>Thanks!</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
              function adjust_col_heights() {
                  if (window.innerWidth &gt; 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(&quot;adjusting heights from:&quot;, 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 + &quot;px&quot;;
                      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 = &quot;absolute&quot;;
                  }
                  else {          
                      document.getElementById('poem').style.position = &quot;relative&quot;;
                  }
              }
              adjust_col_heights();
              window.onresize = adjust_col_heights;
          &lt;/script&gt;
  </code></pre>