réduire l’espace entre les images d’une galerie
Bonjour,
Pour créer une galerie d’images, au début j’étais parti sur l’extension Foogallery mais souhaitant faire exactement le design que je veux, je la fais finalement en html+CSS.
Je suis parti sur une flexbox. J’ai créé un design qui fonctionne parfaitement avec Codepen :https://codepen.io/laurentsch/pen/xxzWNbx par contre, si je le mets dans WordPress, il ne tient pas compte de la règle width: 40%; de la classe flex-item. Comment faire ?
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <h3>Les nids : </h3>
<div class="flex-container">
<div class="flex-item">
<figure>
<img src="https://pasdpanique.fr/wp-content/uploads/2022/11/nidmontbonnot-300x169.jpg" alt="" class="img-nid image-galerie" />
<figcaption>Nid de guêpes à Montbonnot Saint Martin</figcaption>
</figure>
</div>
<div class="flex-item">
<figure>
<img src="https://pasdpanique.fr/wp-content/uploads/2022/11/nidfrelonsstmarcellin-225x300.jpeg" alt="" class="img-nid image-galerie" />
<figcaption>Frelons asiatiques à St Marcellin</figcaption>
</figure>
</div>
<div class="flex-item">
<figure>
<img src="https://pasdpanique.fr/wp-content/uploads/2022/11/nid-225x300.jpeg" alt="" class="img-nid image-galerie" />
<figcaption>Nid d'abeilles</figcaption>
</figure>
</div>
<div class="flex-item">
<figure>
<img src="https://pasdpanique.fr/wp-content/uploads/2022/11/WhatsApp-Image-2022-09-08-at-15.51.52-290x300.jpeg" alt="" class="img-nid image-galerie" />
<figcaption>Nid de guêpes à Lans en Vercors</figcaption>
</figure>
</div>
</div> |
*
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| /* galerie_lightbox */
.flex-container {
/* We first create a flex layout context */
display: flex;
/* Then we define the flow direction
and if we allow the items to wrap
* Remember this is the same as:
* flex-direction: row;
* flex-wrap: wrap;
*/
flex-flow: row wrap;
/* Then we define how is distributed the remaining space */
justify-content: space-between;
padding: 0 10% 0 10%;
margin: 0;
list-style: none;
}
.flex-item {
padding: 0;
width: 40%;
height: 40%;
margin-top: 10px;
/*line-height: 150px;*/
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
/* fin galerie_lightbox */
.img-nid{
width:100%;
height:100%;
} |
Si vous regardez le code de la page en ligne, il est un peu plus complexe que cela, mais si je supprime le javascript du début, ça change rien.
Le Problème est dans Wordpress
Car le Thème "prend le contrôle", de lamise en page globale, à l'inverse de CODEPEN où tu as du HTML pur et dur.
Essaie avec , ça fonctionne souvent, même si ce n'est pasbeau.
Sinon:
- Thème Enfant
- Modifier le CSS.
Bon Courage.
