javascript - メーソンリー ラッパー 100% の幅がモバイルで広すぎる

Question

サイトで Masonry を使用していますが、正常に動作していますが、モバイル バージョンを除いて、タイルは 100% を超えて拡張されています (CSS で設定されています)。

誰かが以前にこの問題を抱えていたことがありますか、またはそれを修正する方法を提案してください。また、モバイル版で石積みを完全に無効にすることもできます。モバイルでクラスを削除しようとしましたが、何らかの理由で Masonry がまだ有効になっています。

JS

var container = document.querySelector('.masonry');
var msnry = new Masonry( container, {
  // options
  gutter: 80,
  itemSelector: '.tile',
  isFitWidth: true,
});

var hodgecont = document.querySelector('.hodgemasonry');
var msnry = new Masonry( hodgecont, {
  // options
  gutter: 50,
  itemSelector: '.hodgeitem',
  isFitWidth: true,
});

$container.imagesLoaded( function(){
  $container.masonry({
    itemSelector : '.hodgeitem'
  });
});

#overviewwrapper {
    padding: @edgePadding;
    width: 100%;
    min-width: 0;
    //max-width: @maxWidth;
    margin: auto;
    margin-top: @topMargin;
    //background-color: green;
}

CSS

#overviewwrapper {
    padding: @edgePadding;
    width: 100%;
    min-width: 0;
    //max-width: @maxWidth;
    margin: auto;
    margin-top: @topMargin;
    //background-color: green;
}


.tile {
    width: 100%;
    max-width: 500px;
    min-width: 0;
    margin: auto;
    margin-bottom: 50px;

}

HTML

<div id = 'overviewwrapper' class = 'masonry design' >

  <div class = 'tile'>
    <h2><span>Is Jack Wild?</span></h2>
    <div id = 'aboutmetext'>
      <p>About para</p>
    </div>
    <div class = 'info'>
      <ul>
          <li>+49 ******</li>
          <li>info (at) ******/li>
      </ul>
    </div>
  </div>

***other tiles here***

</div>