jQuery load function or matchMedia or .css() function not working

Can someone please help and explain why the following code doesn't work? I can't seem to figure out why... to me, everything should be working.

jQuery(window).load(function($){
    if (window.matchMedia("(min-width: 768px)").matches) { 
        var sideHeight = $('.mainContent').css('height');
        $('.sidebar').css('height', sideHeight);
    }
});

Here is a jsfiddle of just the CSS part, which works. http://ift.tt/1LtH4nX

I've tested the media match part by putting an alert in that function, and I could get the alert to pop on window.load, but then the CSS code doesn't work. I've never been able to get the CSS code to run on my website and make my sidebar the same height as the main content. I put the js in the head, and at the end of the body. No change.

The site is built in WP. The content is loaded dynamically, so I thought it was doing the height before the content was loaded, but that's what the window.load() is supposed to fix, right?

Here is an article on the site you can check out. I want the sidebar to be the same height as the mainContent div so the gray background continues down the page. But only on tablet size and up (using bootstrap).

http://ift.tt/1hm4bCJ

via Chebli Mohamed