responsive WordPress gallery shorttag

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Veur Heur

Veur Heur

29/03/2025 15:21:01
Quote Anchor link
Zijn er hier ook CSS experts?

Op de volgende pagina gebruik ik een WordPress gallery shorttag.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
[gallery ids="519708,519709,etc" size="medium" link="file"]


Met de volgende CSS heb ik de gallery responsive kunnen maken:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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); }


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
 
PHP hulp

PHP hulp

19/04/2025 16:51:47
 
Veur Heur

Veur Heur

30/03/2025 17:28:50
Quote Anchor link
Als volgt op kunnen lossen:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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; }
}
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.