Search code examples
jqueryresponsivenessfreewalljs

Freewall jQuery Plugin - Viewing on mobile, certain tiles get width set to zero

I'm having some trouble with the Freewall jquery plugin, which is rather odd.

Basically, when I load the page on anything with a screen size over roughly 580px, the grid works absolutely fine. If, however, I load the page on a mobile device screen size, roughly anything less than 580px, 90% of the tiles widths get set to zero, and of course, breaks the grid layout.

Also, upon resizing the viewport after loading the page on mobile or using mobile dimensions, the broken grid tiles, still, don't get a width set other than zero!

This is rather confusing, as all was working fine, and then all of a sudden, they started doing this.

I've tried retracing my steps back to see if something I'd done after setting it all up had broken it, but nothing's worked.

I've made a gif on giphy that shows what I'm trying to say. As they say, a picture speaks a thousand words. :)

Also, here is my Freewall function:

// FreeWall Grid Settings
    $(function() {
    var wall = new freewall(".grid_container");
    wall.reset({
        fixSize: false,
        animate: true,
        cache: true,
        cellW: 292.5, // These are what saved the day!
        cellH: 284, // These are what saved the day!
        gutterX: 1,
        gutterY: 1,
        onResize: function() {
            wall.fitWidth();
        }
    });
    wall.fitWidth();

});

Thanks guys.

GIF Link: http://gph.is/1lhoXWe

Solution

  • I ended up remedying the issue, by changing some CSS. In particular, the height of the grid tiles.

    FreeWall was not happy that I was not setting a height it seems, so I added in a min-height rule, and the problem was resolved.