How can I make mobile show two columns?

[xnog]

Hi,

I have four columns (width: 25%) and on mobile it shows me only one column.

How can I make mobile show two columns?

var wall2 = new Freewall(".products");
wall2.reset({
selector: '.product',
animate: true,
cellW: 255,
cellH: 'auto',
onResize: function() {
wall2.fitWidth();
}
});

.product {
width: 276.5px;
}

[micahstairs]

What happens if you choose a smaller 'cellW' value?

[xnog]

i still get only one cell on mobile. i tried with 120

[xnog]

Does anyone have an example with mobile and two coluns so I can check what i am doing wrong?

[kombai]

Hi,
you can using cellW as a function

cellW: function(container) {
 return container.width() / 2;
}

You can see the source code of this example:
http://vnjs.net/www/project/freewall/example/live-size.html
Best

[PhantomRay]

I didn't know cellW supports function. I give it a dynamic value according to window.innerWidth.

var width = 236;
if (window.innerWidth <= 320) {
    width = 120;
} else if (window.innerWidth <= 414) {
    width = 150;
} else if (window.innerWidth <= 667) {
    width = 200;
}

var currentWidth = window.innerWidth;
$scope.resetWall = function () {
    wall.reset({
        selector: '.card',
        animate: true,
        cellW: width,
        cellH: 'auto',
        onResize: function () {
            if (currentWidth !== window.innerWidth)
                wall.fitWidth();
        }
    });

    wall.fitWidth();

    wall.container.find('.card img').load(function () {
        wall.fitWidth();
    });
};

Working example at
https://collector.im/categories/action-figures

But I feel Kombai's solution is much better.

[kombai]

@dragonfish-au that good too. Thank you 👍