jquery masonry does not adjust to mobile viewport

Question

I have two installations of Jquery Masonry that as far as I am concerned are identical to each other. One of them adjusts to a mobile viewport and the other one doesn't.

When I do mobile troubleshooting, the styles that are written by Masonry are

The first:

<div id="list_of_albums" style="position: relative; height: 484.656px;" class="masonry">

The second:

<div id="post-area" class="masonry" style="position: relative; height: 2424px;">

Div structure is the same, Masonry install and initialization is the same, css is the same except for the class names.

// masonry customization
jQuery(document).ready(function($) {
    var post_area = $('#list_of_albums');
    post_area.imagesLoaded(function(){
        post_area.masonry({
        // options…
        columnWidth:1,
        isAnimated: true,
        animationOptions: {
            duration: 400,
            easing: 'linear',
            queue: false
        }
    });
    });
});

I have removed media queries in both and it doesn't make any difference. One layout adjusts to the mobile window size and the other one doesn't.

CSS for the one that doesn't

masonry item:

.grid-album-item {

  width: 300px;
  float:left; 
}

CSS for the one that works: no styles for the container

style for the masonry item

#post-area .post {
  width: 300px;
  float: left; 

} 

both can be viewed here - one that works

one that doesn't

Note: both adjust fine to a narrow long desktop window, both display as one column only. It's just on mobile screens that I see the difference. Again, no media queries are in place for either of them.

Ideas appreciated. Ideas on how to troubleshoot this further is also appreciated.

Answer 1

The answer is

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">