Masonry not resizing with window

Question

It seems committed to giving my four rows, regardless of how big the window is. Previously, it'd move items into three rows or fewer as the browser shrunk.

The last thing I fiddled with that may have broken it was playing with columnWidth, but changing it back to 250 doesn't do anything to solve the problem.

JSFiddle

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'
    });
});

Answer 1

The masonry will not resize with window if you set a actual width to it. It seems like you set the width for masonry horizontal alignment. I suggest you to define a dynamical width range which is shown as below and the masonry will resize with window as expected.

#container{
  max-width: 1024px;
  min-width: 960px;
  margin: 0 auto;
}

Here is a jsfiddle demo

Answer 2

try to modify your container id css style with this one

#container {
    max-width: 1082px;
    min-width: auto
    margin: 0 auto;
    //border: 1px solid black;
}

Answer 3

Had the same problem but solved this other way - had this code:

<div class="my-gallery grid" data-masonry='{
   "itemSelector": ".grid-item",
   "columnWidth": 30,
   "fitWidth": true
}'>

Had to remove:

"fitWidth": true