jqueryプラグインによるスマホ版でのjavascriptのエラー

Question

前提・実現したいこと

jqueryのプラグイン(MUURI)を使用してギャライーサイトを制作しております。

発生している問題・エラーメッセージ

PCで見ると問題ないのですが、スマホで並び替えをした時にコンテンツが重なってしまい、上手に表示されません。

該当のソースコード

    document.addEventListener('DOMContentLoaded', function() {
        var grid = null,
            wrapper = document.querySelector('.grid-wrapper'),
            searchField = wrapper.querySelector('.search-field'),
            filterField = wrapper.querySelector('.filter-field'),
            jobField = wrapper.querySelector('.job-field'),
            sortField = wrapper.querySelector('.sort-field'),
            gridElem = wrapper.querySelector('.grid'),
            searchAttr = 'data-title',
            filterAttr = 'data-place',
            jobAttr = 'data-job',
            searchFieldValue,
            filterFieldValue,
            jobFieldValue,
            sortFieldValue,
            dragOrder = [];

        // Init the grid layout
        grid = new Muuri(gridElem, {
            dragEnabled: false
        });

        // Set inital search query, active filter, active sort value and active layout.
        searchFieldValue = searchField.value.toLowerCase();
        filterFieldValue = filterField.value;
        jobFieldValue = jobField.value;
        sortFieldValue = sortField.value;

        // Search field event binding
        searchField.addEventListener('keyup', function() {
            var newSearch = searchField.value.toLowerCase();
            if (searchFieldValue !== newSearch) {
                searchFieldValue = newSearch;
                filter();
            }
        });

        // Filter field event binding
        filterField.addEventListener('change', filter);
        jobField.addEventListener('change', job);

        // Sort field event binding
        sortField.addEventListener('change', sort);

        // Filtering
        function filter() {
            filterFieldValue = filterField.value;
            grid.filter(function(item) {
                var element = item.getElement(),
                    isSearchMatch = !searchFieldValue ? true : (element.getAttribute(searchAttr) || '').toLowerCase().indexOf(searchFieldValue) > -1,
                    isFilterMatch = !filterFieldValue ? true : (element.getAttribute(filterAttr) || '') === filterFieldValue;
                return isSearchMatch && isFilterMatch;
            });
        }

        function job() {
            jobFieldValue = jobField.value;
            grid.filter(function(item) {
                var element = item.getElement(),
                    isSearchMatch = !searchFieldValue ? true : (element.getAttribute(searchAttr) || '').toLowerCase().indexOf(searchFieldValue) > -1,
                    isJobMatch = !jobFieldValue ? true : (element.getAttribute(jobAttr) || '') === jobFieldValue;
                return isSearchMatch && isJobMatch;
            });
        }

        // Sorting
        function sort() {
            // Do nothing if sort value did not change.
            var currentSort = sortField.value;
            if (sortFieldValue === currentSort) {
                return;
            }

            // If we are changing from "order" sorting to something else
            // let's store the drag order.
            if (sortFieldValue === 'order') {
                dragOrder = grid.getItems();
            }

            // Sort the items.
            grid.sort(
                currentSort === 'title' ? compareItemTitle :
                currentSort === 'place' ? compareItemPlace :
                currentSort === 'job' ? compareItemPlace :
                dragOrder
            );
            sortFieldValue = currentSort;
        }

        // Compare data-title
        function compareItemTitle(a, b) {
            var aVal = a.getElement().getAttribute(searchAttr) || '';
            var bVal = b.getElement().getAttribute(searchAttr) || '';
            return aVal < bVal ? -1 : aVal > bVal ? 1 : 0;

        }

        // Compare data-place
        function compareItemPlace(a, b) {
            var aVal = a.getElement().getAttribute(filterAttr) || '';
            var bVal = b.getElement().getAttribute(filterAttr) || '';
            return aVal < bVal ? -1 : aVal > bVal ? 1 : compareItemTitle(a, b);
        }

        function compareItemPlace(a, b) {
            var aVal = a.getElement().getAttribute(jobAttr) || '';
            var bVal = b.getElement().getAttribute(jobAttr) || '';
            return aVal < bVal ? -1 : aVal > bVal ? 1 : compareItemTitle(a, b);
        }

    });

試したこと

外側の高さや内側のコンテンツの高さなどを変えてみましたが、変わりませんでした。

補足情報（FW/ツールのバージョンなど）

よろしくお願いいたします。

Comments

[noka_blank]

HTMLとCSSも追記いただけないでしょうか？
状況を再現できないか試したいです。

[ayaka_000]

@charset "UTF-8";

.special_story a{
display: block;
width: 100%;
height: 500px;
background-image: url(../image/people/p3.jpg);
-webkit-background-size: cover;
background-size: cover;
background-position: center center;
}

.gallery {
width: 80%;
margin-left: auto;
}

.grid {
position: relative;
}

.item {
display: block;
position: absolute;
width: 24%;
margin: 0px;
margin: 1px;
}

.item a{
text-decoration: none;
color: #000;
}

.x2 {
width: 49%;
}

p{
margin: 0;
padding-left: 5px;
line-height: 20px;
}

p.en{
margin-bottom: 10px;
}

.filter-controls{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
margin: 10px 0px;
}

.control{
margin-right:20px;
border-right: 1px solid #000;
padding: 5px 10px;
}

.sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:before,
.sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail:before {
border-color: #ffa801;
}
.sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:after,
.sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail:after {
color: #ffa801;
}
/*縦スライド時の矢印の位置*/
.sp-vertical .sp-previous-arrow {
top: 0;
}
.sp-vertical .sp-next-arrow {
bottom: 0;
}

@media (max-width :1600px) {
.item {
width: 32%;
}
.x2 {
width: 65%;
}

}

@media (max-width :1400px) {
.gallery {
width: 100%;
margin-left: auto;
}

}

@media (max-width :860px) {
.item {
width: 49%;
}
.x2 {
width: 49%;
}
.filter-controls {
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
}
.control {
border-right: none;
padding: 0px 5px;
border-bottom: 0.5px solid #d3d3d3;
margin-right: 10px;
margin-left: 10px;
}

}

/* 640ピクセル幅以下になったら2カラム化 */

@media (max-width :640px) {
.item {
width: 99%;
height: 300px;
}
.x2 {
width: 99%;
height: 300px;
}
}
.item img {
width: 100%;
}

[ayaka_000]

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
<?php echo $title;?>
</title>
<meta name="description" content="<?php echo $description;?>">
<meta name="keywords" content="<?php echo $keywords;?>">
<?php include("include/include.php"); ?>
</head>

<body>
<?php include("../include/header.php"); ?>

<article class="gallery">
<div class="special_story">
<a href=""></a>
</div>
<section class="grid-wrapper">

<div class="filter-controls">
<div class="control">Search :
<input class="search-field form-control" type="text" name="search" placeholder="Enter the title">
</div>
<div class="control">Place :
<select class="filter-field form-control">
<option value="">None</option>
<option value="shinjuku">Shinjuku</option>
<option value="ebisu">Ebisu</option>
<option value="daikanyama">Daikanyama</option>
</select>
</div>
<div class="control">Job :
<select class="job-field form-control">
<option value="">None</option>
<option value="design">design</option>
<option value="restrant">Restrant</option>
<option value="movie">movie</option>
</select>
</div>
<div class="control">Sort :
<select class="sort-field form-control">
<option value="order">None</option>
<option value="title">Order by title</option>
<option value="place">Order by place</option>
<option value="job">Order by job</option>
</select>
</div>
</div>

<div class="grid">
<!--<div class="item x2" data-place="daikanyama" data-job="design" data-title="aaa">
<div class="item-content">
<div class="custom-content">
<a href="">
<img src="image/people/p3.jpg">
<p>aaa</p>
</a>
</div>
</div>
</div>-->
<div class="item x2" data-place="ebisu" data-job="restrant" data-title="両親のおかげでひとまわり大きくなりました">
<div class="item-content">
<div class="custom-content">
<a href="street/20190114.php">
<img src="image/people/p2.jpg">
<p>両親のおかげでひとまわり大きくなりました</p>
<p class="en"></p>
</a>
</div>
</div>
</div>

<div class="item" data-place="shinjuku" data-job="movie" data-title="aaa">
<div class="item-content">
<div class="custom-content">
<a href="">
<img src="image/people/p1.jpg">
<p>aaa</p>
</a>
</div>
</div>
</div>

<div class="item" data-place="daikanyama" data-job="design" data-title="aaa">
<div class="item-content">
<div class="custom-content">
<a href="">
<img src="image/people/p3.jpg">
<p>aaa</p>
</a>
</div>
</div>
</div>
<div class="item" data-place="ebisu" data-job="restrant" data-title="両親のおかげでひとまわり大きくなりました">
<div class="item-content">
<div class="custom-content">
<a href="street/index.php">
<img src="image/people/p2.jpg">
<p>両親のおかげでひとまわり大きくなりました</p>
</a>
</div>
</div>
</div>
<div class="item x2" data-place="shinjuku" data-job="movie" data-title="aaa">
<div class="item-content">
<div class="custom-content">
<a href="">
<img src="image/people/p1.jpg">
<p>aaa</p>
</a>
</div>
</div>
</div>
<!--<div class="item x2" data-place="daikanyama" data-job="design" data-title="aaa">
<div class="item-content">
<div class="custom-content">
<a href="">
<img src="image/people/p3.jpg">
<p>aaa</p>
</a>
</div>
</div>
</div>-->
<div class="item x2" data-place="ebisu" data-job="restrant" data-title="両親のおかげでひとまわり大きくなりました">
<div class="item-content">
<div class="custom-content">
<a href="street/20190114.php">
<img src="image/people/p2.jpg">
<p>両親のおかげでひとまわり大きくなりました</p>
<p class="en"></p>
</a>
</div>
</div>
</div>

<div class="item" data-place="shinjuku" data-job="movie" data-title="aaa">
<div class="item-content">
<div class="custom-content">
<a href="">
<img src="image/people/p1.jpg">
<p>aaa</p>
</a>
</div>
</div>
</div>

<div class="item" data-place="daikanyama" data-job="design" data-title="aaa">
<div class="item-content">
<div class="custom-content">
<a href="">
<img src="image/people/p3.jpg">
<p>aaa</p>
</a>
</div>
</div>
</div>
<div class="item" data-place="ebisu" data-job="restrant" data-title="両親のおかげでひとまわり大きくなりました">
<div class="item-content">
<div class="custom-content">
<a href="street/index.php">
<img src="image/people/p2.jpg">
<p>両親のおかげでひとまわり大きくなりました</p>
</a>
</div>
</div>
</div>
<div class="item x2" data-place="shinjuku" data-job="movie" data-title="aaa">
<div class="item-content">
<div class="custom-content">
<a href="">
<img src="image/people/p1.jpg">
<p>aaa</p>
</a>
</div>
</div>
</div>
</div>

</section>
</article>
<?php include("../include/footer.php"); ?>
</body>

[ayaka_000]

よろしくお願いいたします。

[退会済みユーザー]

とりあえず jquery も jquery プラグインもはいってないので

エラーのでる jquery 及び同プラグインを使用したソースにするか
現在のコードで起きてる問題にタイトルを書き換えてください

あとマークダウンをつかってください。
投稿画面に説明がいろいろ乗ってたはずです

[ayaka_000]

申し訳ございません。
現在問題が起きているサイトをみていただく形でもよろしいのでしょうか・・・
http://irobana.sakura.ne.jp/test2/magazine

[退会済みユーザー]

なんとなく症状がわかったけどスタイルをゼロからなおすはめになりそうだな・・・・

[ayaka_000]

ありがとうございます。
具体的にどのあたりが問題なのでしょうか、、、
ご回答よろしくお願いいたします。

Answer 1

以下をコメントアウトすると、「重なって表示される」という部分は解消されないでしょうか？

/* 640ピクセル幅以下になったら2カラム化 */

@media (max-width :640px) {
  .item {
    width: 99%;
    /*height: 300px;  これをコメントアウト */
  }
  .x2 {
    width: 99%;
    /*height: 300px;  これをコメントアウト */
  }
}

Comments

[ayaka_000]

申し訳ございません。
解決されません、、、
特にipadで見たときがおかしいです。