Responsive Collapsed Container with Quicksand

I'm having a problem with the .ul that contain the elements being animated by quicksand, the problem happens when seen on mobile or when you reduce de width of the viewport of the browser to simulate a mobile width, because at that width the elements being animated display in a vertical line making the height of the .ul element bigger than the height that quicksand applies, in my case quicksand is dinamically fixing a height of 828px but the elements require a bigger height so the result is that the .ul and all heigher parent cotainer to collapse so the elements overflow on top of the footer breaking the layout, any direction to fix this is appreciated, thanks razorjack.

This code I'm using to make Quicksand filter:

Markup:

<div class="main">
    <div class="filter">
          <ul><a href="#">Filter Name</a></ul>
    </div>

<div class="container">
       <ul class="ul">
                 <li><li>
                 <li><li>
       </ul>
</div>
</div>

jQuery;

var items = $('.ul li'),
    itemsByTags = {};

// Looping though all the li items:

items.each(function(i){
    var elem = $(this),
        tags = elem.data('tags').split(',');

    // Adding a data-id attribute. Required by the Quicksand plugin:
    elem.attr('data-id',i);

    $.each(tags,function(key,value){

        // Removing extra whitespace:
        value = $.trim(value);

        if(!(value in itemsByTags)){
            // Create an empty array to hold this item:
            itemsByTags[value] = [];
        }

        // Each item is added to one array per tag:
        itemsByTags[value].push(elem);
    });

});

createList('All',items);

// Looping though the arrays in itemsByTags:
$.each(itemsByTags,function(k,v){
    createList(k,v);
});

$('.filter a').on('click',function(e){
    var link = $(this);

    link.addClass('active').siblings().removeClass('active');

    // Using the Quicksand plugin to animate the li items.
    // It uses data('list') defined by our createList function

    $('.ul').quicksand(link.data('list').find('li'), function() { 

 }

 )
    e.preventDefault();
});

$('.filter a:first').click();

function createList(text,items){

    // This is a helper function that takes the
    // text of a menu button and array of li items

    // Creating an empty unordered list:
    var ul = $('<ul>',{'class':'hidden'});

    $.each(items,function(){
        // Creating a copy of each li item
        // and adding it to the list:

        $(this).clone().appendTo(ul);
    });

    ul.appendTo('.container');

    // Creating a menu item. The unordered list is added
    // as a data parameter (available via .data('list'):

    var a = $('<a>',{
        html: text,
        href:'#',
        data: {list:ul}
    }).appendTo('.filter > ul');
}

razorjack / quicksand

Responsive Collapsed Container with Quicksand #83