[WordPress] 応答のレイアウトをワードプレスに正しく表示されません。

スポンサーリンク

質問

画面を縮小するとき、それはイメージで動作するよう表示されます。私はビジュアルコンポーザーの”生 HTML”オプション、もともと働いた 4 項目のレイアウトとしてそれを置きます。デスクトップ ビュー (タブレット 3)、6 列のレイアウトのパーセンテージを変更されたが、これは右を表示するだけではないです。

、助けてください?

CSS

.contentBox {
    padding: 0;
        text-align: center;
}
.allImg {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}
.arrow,
.collectionCopy {
    display: inline-block;
    float: left;
    margin: 0 auto;
    vertical-align: top;
}
.collectionCopy a p {
    text-align: left;
}
.arrow {
    min-height: 14px;
    min-width: 14px;
}

.collectionCopy p {
    display: block;
    font-size: 100%;
    padding: 0 0 5px 5px;
    margin-bottom: 0;
}

.collectionCopy p:first-child {
    color: #000000;
    font-weight: bold;
            margin-top: -4px; 
}

.collectionCopy p:last-child {
    color: #676767;
    font-color: #e1e1e1;
            margin-top: -4px;
            margin-left: 0;
}

.collectionInfo {
    display: block;
    margin-top: 15px;
}

.collectionInfo a,
.arrow a {
    text-decoration: none;
}

.collectionImg {
    float: left;
    padding: 16px 8px;
    width: 16.66%;
        margin: 0 auto;
}

.collectionImg a img {
    display: block;
    width: 100%;
            margin: 0 auto;
}

@media screen and (min-width: 420px) and (max-width: 995px) {
    .collectionImg {
        width: 33%;
        padding: 8px;
    }
}

@media screen and (min-width: 320px) and (max-width: 420px) {
    .collectionImg {
        float: none;
        width: 100%;
        margin-bottom: 32px;
    }

    .allImg {
        padding: 0;
    }

}

HTML

    <div class="allImg">

        <div class="collectionImg">

            <a href="#"><img src="http://test.gpjbaker.com/wp-content/uploads/2015/08/OT854_espresso_top.jpg"></a>

            <div class="collectionInfo">

                <div class="arrow">
                    <a href="#"><img src="http://test.gpjbaker.com/wp-content/uploads/2015/07/arrow.png"/></a>
                </div>

                <div class="collectionCopy">
                    <a href="#">
                    <p>Harbourne</p>
                    <p>Colourways (7)</p>
                    </a>
                </div>

            </div> <!-- end collectionInfo -->

        </div> <!-- end collectionImg -->

        <div class="collectionImg">

            <a href="#"><img src="http://test.gpjbaker.com/wp-content/uploads/2015/08/OT854_sable_top.jpg"></a>

            <div class="collectionInfo">

                <div class="arrow">
                    <a href="#"><img src="http://test.gpjbaker.com/wp-content/uploads/2015/07/arrow.png"/></a>
                </div>

                <div class="collectionCopy">
                    <a href="#">
                    <p>Harbourne</p>
                    <p>Colourways (7)</p>
                    </a>
                </div>

            </div> <!-- end collectionInfo -->

        </div> <!-- end collectionImg -->

        <div class="collectionImg">

            <a href="#"><img src="http://test.gpjbaker.com/wp-content/uploads/2015/08/OT850_toffee_top.jpg"></a>

            <div class="collectionInfo">

                <div class="arrow">
                    <a href="#"><img src="http://test.gpjbaker.com/wp-content/uploads/2015/07/arrow.png"/></a>
                </div>

                <div class="collectionCopy">
                    <a href="#">
                    <p>Harbourne</p>
                    <p>Colourways (7)</p>
                    </a>
                </div>

            </div> <!-- end collectionInfo -->

        </div> <!-- end collectionImg -->

        <div class="collectionImg">

            <a href="#"><img src="http://test.gpjbaker.com/wp-content/uploads/2015/08/OT854_espresso_top.jpg"></a>

            <div class="collectionInfo">

                <div class="arrow">
                    <a href="#"><img src="http://test.gpjbaker.com/wp-content/uploads/2015/07/arrow.png"/></a>
                </div>

                <div class="collectionCopy">
                    <a href="#">
                    <p>Harbourne</p>
                    <p>Colourways (7)</p>
                    </a>
                </div>

            </div> <!-- end collectionInfo -->

        </div> <!-- end collectionImg -->

        <div class="collectionImg">

            <a href="#"><img src="http://test.gpjbaker.com/wp-content/uploads/2015/08/OT854_sable_top.jpg"></a>

            <div class="collectionInfo">

                <div class="arrow">
                    <a href="#"><img src="http://test.gpjbaker.com/wp-content/uploads/2015/07/arrow.png"/></a>
                </div>

                <div class="collectionCopy">
                    <a href="#">
                    <p>Harbourne</p>
                    <p>Colourways (7)</p>
                    </a>
                </div>

            </div> <!-- end collectionInfo -->

        </div> <!-- end collectionImg -->

        <div class="collectionImg">

            <a href="#"><img src="http://test.gpjbaker.com/wp-content/uploads/2015/08/OT850_toffee_top.jpg"></a>

            <div class="collectionInfo">

                <div class="arrow">
                    <a href="#"><img src="http://test.gpjbaker.com/wp-content/uploads/2015/07/arrow.png"/></a>
                </div>

                <div class="collectionCopy">
                    <a href="#">
                    <p>Harbourne</p>
                    <p>Colourways (7)</p>
                    </a>
                </div>

            </div> <!-- end collectionInfo -->

        </div> <!-- end collectionImg -->

    </div> <!-- end allImg -->

</div> <!-- end contentBox -->

答え

このメディア クエリ内に CSS ファイルに CSS ルールを後で追加しようとすると、

@media screen and (min-width: 420px) and (max-width: 995px)

.collectionImg:nth-child(4n+0){
    clear:left;
}

について: n 番目の子擬似クラス

http://stackoverflow.com/questions/32315174/responsive-layout-not-displaying-properly-on-wordpress

スポンサーリンク

Leave a Reply