CODEWITHSUNDEEP
javascriptjquerycssjquery-masonry
Sebastian
Sebastian

Reputation: 3626

Masonry not resizing with window

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

Upvotes: 0

Views: 1967

Answers (3)

Volmarg Reiso
Volmarg Reiso

Reputation: 483

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

Upvotes: 0

Chickenrice
Chickenrice

Reputation: 5727

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

Upvotes: 1

user2572094
user2572094

Reputation: 190

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

Upvotes: 1

Related Questions