responsive WordPress gallery shorttag
Zijn er hier ook CSS experts?
Op de volgende pagina gebruik ik een WordPress gallery shorttag.
Met de volgende CSS heb ik de gallery responsive kunnen maken:
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...?
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
Als volgt op kunnen lossen:
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; }
}
.
Toevoeging op 17/11/2025 09:14:47:
.
Toevoeging op 17/11/2025 09:14:47:
.



