Something seems to be fixed on displaying four rows, no matter the size of the window. Previously, it would adjust to three rows or fewer as the browser was resized.
I recently played around with columnWidth, but reverting it back to 250 doesn't seem to resolve the issue.
HTML
<div id="container" class="feed">
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
<div class="item">d</div>
<div class="item">e</div>
<div class="item">f</div>
<div class="item">g</div>
<div class="item">h</div>
<div class="item">i</div>
</div>
CSS
body {
padding: 20px;
background-color: #E9E9E9;
}
/* MASONRY */
.item {
width: 250px;
margin: 10px;
/*float: left;*/
background-color: #FFFFFF;
border-radius: 3px;
box-shadow: 0 2px 2px -2px gray;
}
#container {
width: 1082px;
margin: 0 auto;
//border: 1px solid black;
}
.text {
padding: 10px;
}
.image {
/* border-radius: 10px; */
border-bottom: 1px solid #e1e1e1;
/* margin-top: 20px; */
padding: 10px;
//padding-top: 20px;
//padding-bottom: 20px;
}
ul.list-inline {
margin: 0;
}
li:last-child {
float:right;
}
hr {
margin-top: 10px;
margin-bottom: 10px;
border: 0;
border-top: 1px solid #e1e1e1;
margin-left: -10px;
margin-right: -10px;
}
.text-loader {
text-align: center;
}
JS
$(document).ready(function () {
/* MASONRY */
var $container = $('#container');
// initialize
$container.masonry({
columnWidth: 1,
itemSelector: '.item'
});
});