Discussion :

[laurentSc]

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.

[NJNDEV]

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

!important

, ça fonctionne souvent, même si ce n'est pasbeau.
Sinon:

• Thème Enfant
• Modifier le CSS.

Bon Courage.

[laurentSc]

Merci pour ta réponse.
Comme la page existe encore, j'ai essayé le !important...
stop car pour te répondre, j'ai voulu copier-coller du code et j'ai vu un gros bug dans mon CSS (il manquait un point devant le nom de la classe !).
Du coup, c'est OK, mais il va falloir que je recours aux media query car sur PC, c'est OK, mais sur smartphone, moche...