web-dev-qa-db-ja.com

WordPressギャラリー（.gallery-item）をレスポンシブにする

ギャラリーのショートコード：[gallery link="file" columns="5" size="medium"]

私は、ウェブサイトの内側のページに5列のギャラリーを使用しています。明らかに、サイトがモバイルやタブレット端末にも反応するとき、ギャラリー内の画像はデフォルトスタイルのwidth: 20%;を維持し、小さすぎます。

幅をパーセンテージで増やすためにメディアクエリスタイルを追加しようとしましたが、WPは依然として列クラス.gallery-columns-5を適用します。

理想的には、デスクトップ用に5列、タブレット用に3列、モバイルデバイス用に1列の画像を用意するとよいでしょう。

誰かがこれのための良い修正を知っていますか？

/ ## Gallery
--------------------------------------------- */

.gallery {
    overflow: hidden;
}

.gallery-item {
    float: left;
    margin: 0 0 30px;
    padding: 0 5px;
    text-align: center;
    width: 100%;
}

.gallery-columns-5 .gallery-item {
    width: 20%;
}

.gallery-columns-2 .gallery-item:nth-child(2n+1),
.gallery-columns-3 .gallery-item:nth-child(3n+1),
.gallery-columns-4 .gallery-item:nth-child(4n+1),
.gallery-columns-5 .gallery-item:nth-child(5n+1),
.gallery-columns-6 .gallery-item:nth-child(6n+1),
.gallery-columns-7 .gallery-item:nth-child(7n+1),
.gallery-columns-8 .gallery-item:nth-child(8n+1),
.gallery-columns-9 .gallery-item:nth-child(9n+1) {
    clear: left;
}

.gallery img {
    border: 1px solid #ddd;
    height: auto;
    padding: 4px;
}

.gallery img:hover {
    border: 1px solid #999;
}

@media only screen and (max-width: 800px)

.gallery-item {
    width: 33%;
}
imagescssgalleryresponsive
2
Tom25

これに対する簡単な解決策があります。ギャラリーに5列グリッドシステムを使用し、@media-queriesを使用してタブレットとモバイル用に変更できます。私はあなたの与えられたURLでそれをテストしました、そしてそれは完璧に働きます。ただし、次のコードを使用するには削除しなければならなかったため、以前に使用したカスタムコードを削除してみてください。

/* For displaying 3 columns on tablet */
@media only screen and (max-width: 800px) {
 .gallery-columns-5 .gallery-item {
     width: 33%;
 }
}

/* For displaying single column on mobile */
@media only screen and (max-width: 480px) {
 .gallery-columns-5 .gallery-item {
     width: 100%;
 }
}

.gallery-columns-5 .gallery-item:nth-child(5n+1) {
     clear: none;
}
5
Manoj Kumar