CODEWITHSUNDEEP
jqueryresponsivenessfreewalljs
c0d3n4m3
c0d3n4m3

Reputation: 75

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

Upvotes: 0

Views: 642

Answers (2)

Scott
Scott

Reputation: 706

If anyone else ends up here like I did - the problem for me was that the CellW I was giving was 300 - when I got to a certain point, the items got a width of 0 - narrower (where navigation disappeared) there was more room so 300 worked. the answer was to set cellW to 200 - worked like a charm

Upvotes: 0

c0d3n4m3
c0d3n4m3

Reputation: 75

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.

Upvotes: 0

Related Questions