Absolutely pulling my hair out on this one. There seems to be no black and white solution offered on GitHub - which is strange, since it seems like a fairly simple concept. Perhaps I just don't get it.
Basically, I am trying to create a fluid and responsive portfolio - using Isotope to filter the items. The filtering works fine, the 4 columns are totally fluid and everything looks great when you resize the window.
HOWEVER, for mobile and tablet layouts, I simply need to adapt from a 4-column layout to a 2-column layout.
I tried this:
$(window).load(function(){
var $container = $('#thumbs');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
},
});
// initialize Isotope
$container.isotope({
// options...
resizable: false, // disable normal resizing
// set columnWidth to a percentage of container width
masonry: { columnWidth: $container.width() / 4 },
});
// update columnWidth on window resize
$(window).smartresize(function(){
$container.isotope({
// update columnWidth to a percentage of container width
masonry: { columnWidth: $container.width() / 4 }
});
});
// My attempt at using media queries to change 'columnWidth'
$(window).resize(function() {
var width = $(window).width();
if (width < 768) {
$container.isotope( {
// update columnWidth to half of container width
masonry: { columnWidth: $container.width() / 2 }
});
}
});
});
Didn't work :(
Any help would be much appreciated.
This should work to set your number of columns. Then you just divide with columns
.
var columns;
// set column number
setColumns();
// rerun function when window is resized
$(window).on('resize', function() {
setColumns();
});
// the function to decide the number of columns
function setColumns() {
if($(window).width() <= 768) {
columns = 2;
} else {
columns = 4;
}
}