Responsive Masonry Grid theme with infinite scrolling

Question

I've been working on a grid portfolio Tumblr theme with Masonry, Infinite Scrolling and Images Loaded. I've finally gotten everything looking right and positioned where I want it, but now I'm having trouble getting the posts/photos to resize according to the browser window. If anyone can help I would greatly appreciate it. I can post my whole Tumblr theme code if that would help. Here is a link to the theme I'm working on: http://theme12014my.tumblr.com/

Grid layout CSS

.article
 {margin:1px;
float:left;
   text-align:center; 
   width:300px; 
   break-inside: avoid; display:inline-block; max-width:50% auto;
}
.content {
max-width:970px;
background-color:#000;
 margin: auto; 
   }

Masonry Infinite Scroll Images Loaded script

<script>(function() {
var $tumblelog = $('.content');

$tumblelog.infinitescroll({
    navSelector  : ".pagination",            
    nextSelector : ".pagination a:first",    
    itemSelector : ".article",
    bufferPx     : 50,
    done : "",
    loading: {
        finishedMsg: "<p> </p>",
        img : " ",
        msg: null,
        msgText: "<p> </p>"
    },
},
  function( newElements ) {
        var $newElems = $( newElements ).css({ opacity: 0 });
        $newElems.imagesLoaded(function(){
            $newElems.animate({ opacity: 1 });
            $tumblelog.masonry( 'appended', $newElems);
        });
      }
);




$tumblelog.imagesLoaded( function(){
  $tumblelog.masonry({
    columnWidth: function( containerWidth ) {
        return containerWidth / 300;
      }
  });    });
})();
</script>

Answer 1

Try calling $tumblelog.masonry() after the window is resized. You can use event $(window).on("resize", <yourfunction>) to keep track of that.

Note that the masonry container itself has to be responsible, since mansory will use the container size to calculate how tiles should be placed on screen.