Gallery

> Master Course > Gallery
◆同幅のブロックを並べる時に使う(キャプション付き画像も)

margin は ブロック外の余白~ブロック幅 25% + margin:10px; =25% + 10px・・・3ブロックしか並ばない
padding はブロック内の余白~ブロック幅 25% + padding:10px; =25%・・・4ブロック並ぶ

テーマ「Edge」は、左右の余白が margin なので padding に修正
display: inline-block; を追加  text-align: center; は好みで

/*————————————————————–
13.2 Galleries 変更
————————————————————–*/

.gallery-item {
    float: left;
    margin: 0 4px 4px 0;
    overflow: hidden;
    position: relative;
}
    ↓ に変更

.gallery-item {
    float: left;
display: inline-block;
padding: 0 20px 24px;
text-align: center;
    overflow: hidden;
    position: relative;
}

/*————————————————————–
20.0 追加
————————————————————–*/

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

.gallery-columns-4 .gallery-item { width: 50%;}

@media only screen and (max-width: 480px) {
.gallery-columns-2 .gallery-item,
.gallery-columns-3 .gallery-item,
.gallery-columns-4 .gallery-item { width: 100%;}
}


ul class=”gallery-columns-2″ 数字は列数
li class=”gallery-item”

◆ gallery-columns-2

◆ gallery-columns-3

◆ gallery-columns-4

© 2024 . Powered by WordPress. Theme by Viva Themes.