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 html : Sélectionner tout - Visualiser dans une fenêtre à part
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 css : Sélectionner tout - Visualiser dans une fenêtre à part
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.