i implemented masonry into my website because i am using a grid system and it seemded the best and easiest solution to making the grid work properly. It all worked great until i added the

isFitWidth = true

statement. It worked in terms of centralising the grid, however the grid no longer reloads when i resize the browser. Before as i made the browser smaller the grid elements moved underneath each other, now they only reload when i either reload the page manually, or make the browser bigger, not when i make it smaller.

Any ideas why?

JQUERY

 <script>
$(document).ready(function() {

var $container = $('#dash_content');
// initialize
$container.masonry({
  columnWidth: 300,
  itemSelector: '.dash_content_ele',
  isFitWidth: true, 
  gutter: 35,
  isResizable: true
});
    });
</script>

CSS

    #dash_content{

  width: 100%;
  margin-left: auto;
  margin-right: auto;
  min-height: 1000px;
  height: auto;
  background-color: #aaaaaa;

}



.dash_content_ele{
  width: 300px;
  min-height: 200px;
  background-color: #ffffff;
  border-radius: 6px;
  height: auto;

  margin-bottom: 25px;
  float: left;
  box-shadow: 0px 1px 2px #555555;
  position: relative;
  background-image: url(../images/dashboard/dash_ele_background.png);
  background-repeat: repeat;
}
.dash_content_ele.w2{
  width:635px;
}

HTML

<div id="dash_content">

    <div class="dash_content_ele">

        </div><!--end dash_content_ele-->               

</div><!--end dash_content-->

i implemented masonry into my website because i am using a grid system and it seemded the best and easiest solution to making the grid work properly. It all worked great until i added the

isFitWidth = true

statement. It worked in terms of centralising the grid, however the grid no longer reloads when i resize the browser. Before as i made the browser smaller the grid elements moved underneath each other, now they only reload when i either reload the page manually, or make the browser bigger, not when i make it smaller.

Any ideas why?

JQUERY

 <script>
$(document).ready(function() {

var $container = $('#dash_content');
// initialize
$container.masonry({
  columnWidth: 300,
  itemSelector: '.dash_content_ele',
  isFitWidth: true, 
  gutter: 35,
  isResizable: true
});
    });
</script>

CSS

    #dash_content{

  width: 100%;
  margin-left: auto;
  margin-right: auto;
  min-height: 1000px;
  height: auto;
  background-color: #aaaaaa;

}



.dash_content_ele{
  width: 300px;
  min-height: 200px;
  background-color: #ffffff;
  border-radius: 6px;
  height: auto;

  margin-bottom: 25px;
  float: left;
  box-shadow: 0px 1px 2px #555555;
  position: relative;
  background-image: url(../images/dashboard/dash_ele_background.png);
  background-repeat: repeat;
}
.dash_content_ele.w2{
  width:635px;
}

HTML

<div id="dash_content">

    <div class="dash_content_ele">

        </div><!--end dash_content_ele-->               

</div><!--end dash_content-->

• javascript
• jquery
• css
• jquery-masonry

1 Answer 1

You need to change your .dash_content_ele CSS to use percentage widths and not fixed widths (width: 300px;).

Example

.dash_content_ele {
    width: 20%;
}

--EDIT--

As suggested by Arken, you can call masonry reload within a window resize function.

$(window).resize(function () {
    $('#container').masonry('reloadItems');
});