Enquire.js not working on page load, only works when screen <= 480px

Question

So I am using Enquire.js to add and remove bootstrap's pre-defined css classes for my website. Here is what I have:

Some bootstrap HTML thumbnails:

<div class="row">
  <div class="thumb thumb col-xs-12 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." class="img-rounded img-responsive" alt="...">
    </a>
  </div>
  <div id ="thumb" class="thumb col-xs-12 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." class="img-rounded img-responsive" alt="...">
    </a>
  </div>
</div>

I have set up the enquire.js so that the thumbnail sizes resize based on screen size as such:

<script type="text/javascript">

var $info = $('.thumb');

    enquire.register("(max-width: 480px)", {

    match: function() {      
        $info.removeClass('col-xs-6');
        $info.addClass('col-xs-12');
    },


    unmatch: function() {
         $info.removeClass('col-xs-12');
         $info.addClass('col-xs-6');      
    }

    }).listen();

</script> 

Problem:

The problem I am having is that the enquire.js code only kicks in once the screen size has been reduced to 480px or less .

So when the site is first loaded, the resize code won't work until I actually manually resize it down to 480px or lower and then you can see the resizing take place.

You can have a look at the site here

Answer 1

The unmatch function will only work when it goes from a matched state to an unmatched state.

I think you want to use the setup function as well. This will run the javascript inside when the handler is called. These are the four main calls from the enquire.js site

enquire.register("screen and (max-width:45em)", {

// OPTIONAL
// If supplied, triggered when a media query matches.
match : function() {},      

// OPTIONAL
// If supplied, triggered when the media query transitions 
// *from a matched state to an unmatched state*.
unmatch : function() {},    

// OPTIONAL
// If supplied, triggered once, when the handler is registered.
setup : function() {},    

// OPTIONAL, defaults to false
// If set to true, defers execution of the setup function 
// until the first time the media query is matched
deferSetup : true,

// OPTIONAL
// If supplied, triggered when handler is unregistered. 
// Place cleanup code here
destroy : function() {}

});

Answer 2

I think you might need to have the code inside a document ready. Here using jQuery:

<script type="text/javascript">

    $(function() {

        var $info = $('.thumb');

        enquire.register("(max-width: 480px)", {

        match: function() {      
            $info.removeClass('col-xs-6');
            $info.addClass('col-xs-12');
        },


        unmatch: function() {
             $info.removeClass('col-xs-12');
             $info.addClass('col-xs-6');      
        }

        });

    });

</script>