responsive WordPress gallery shorttag
Op de volgende pagina gebruik ik een WordPress gallery shorttag.
Met de volgende CSS heb ik de gallery responsive kunnen maken:
Code (php)
1
2
3
4
5
2
3
4
5
.gallery { display:flex; flex-wrap:wrap; width:100% !important; margin-bottom:1rem !important; }
.gallery-item { width:33.333% !important; margin:0 !important; padding:0 8px 8px 0 !important; }
.gallery-icon { position:relative; padding-bottom:56.25%; }
.gallery-icon a, .gallery-icon img { position:absolute; top:0; right:0; bottom:0; left:0; height:100%; width:100%; }
.gallery-icon img { object-fit:cover; object-position:50%; border:1px solid var(--bs-light-border-subtle) !important; border-radius:var(--bs-border-radius); }
.gallery-item { width:33.333% !important; margin:0 !important; padding:0 8px 8px 0 !important; }
.gallery-icon { position:relative; padding-bottom:56.25%; }
.gallery-icon a, .gallery-icon img { position:absolute; top:0; right:0; bottom:0; left:0; height:100%; width:100%; }
.gallery-icon img { object-fit:cover; object-position:50%; border:1px solid var(--bs-light-border-subtle) !important; border-radius:var(--bs-border-radius); }
Een doorn in het oog is echter dat er rechts wat padding is die ik maar niet weg krijg, galleries gemaakt met de nieuwe Gutenberg editor hebben dit niet
Ik heb een poging gedaan met :nth-child(3n) op het .gallery-item de padding weg te halen, echter zonder veel succes.
Waarschijnlijk kijk ik ergens overheen en is het een easy fix...?
Gewijzigd op 30/03/2025 17:30:09 door Veur Heur
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
.gallery { display:grid; grid-template-columns:auto auto auto; gap:8px; }
.gallery > br { display:none; }
.gallery > dl { width:100% !important; margin:0; padding:0; }
.gallery-item { margin:0 !important; }
.gallery-icon { position:relative; padding-bottom:56.25%; }
.gallery-icon a, .gallery-icon img { position:absolute; top:0; right:0; bottom:0; left:0; height:100%; width:100%; }
.gallery-icon img { object-fit:cover; object-position:50%; border:1px solid var(--bs-light-border-subtle) !important; border-radius:var(--bs-border-radius); }
@media (max-width:767px) {
.gallery { grid-template-columns:auto auto; }
}
.gallery > br { display:none; }
.gallery > dl { width:100% !important; margin:0; padding:0; }
.gallery-item { margin:0 !important; }
.gallery-icon { position:relative; padding-bottom:56.25%; }
.gallery-icon a, .gallery-icon img { position:absolute; top:0; right:0; bottom:0; left:0; height:100%; width:100%; }
.gallery-icon img { object-fit:cover; object-position:50%; border:1px solid var(--bs-light-border-subtle) !important; border-radius:var(--bs-border-radius); }
@media (max-width:767px) {
.gallery { grid-template-columns:auto auto; }
}