28114 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai le code suivant:

.photosx4 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    margin-bottom: 70px;
    padding-top: 10px;
    background-color: #ebebeb;
}
.photosx4 div {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.photosx4 img {
    display: block;
    max-width: 100%; /* permet de remplir la <div> avec l'image */
}

@media all and (max-width: 479px) {
    .media, .text-2-col, .photosx4 {
        flex-wrap: wrap;
        width: 95%;
    }
    .media, .text-2-col {
        margin-bottom: 40px;
    }
    .image img {
        max-width: 200px;
    }
    .text-2-col div {
        padding: 10px 0; 
    }
    .text-2-col div:nth-child(1) {
        border-right: none;
    }
}



    <article class="photosx4">
      <div>
        <img src="piece-de-vie-gite-8-personnes-bretagne-ti-goudoul.jpg" alt="Marie la propriétaire du gite ti Goudoul">
        <span class="center"><h5>La pièce de vie XXL</h5>
          <small>véritable poumon de la maison</small></span>
      </div>
      <div>
        <img src="chambre-kerfany-gite-8-personnes-bretagne-tigoudoul.jpg" alt="Marie la propriétaire du gite ti Goudoul">
        <span class="center"><h5>L'une des 4 chambres</h5>
          <small>draps fournis, lits faits</small></span>
      </div>
      <div>
        <img src="espace-enfants-gite-8-personnes-bretagne-ti-goudoul.jpg" alt="Marie la propriétaire du gite ti Goudoul">
        <span class="center"><h5>La salle de jeux des enfants</h5>
          <small>Jouets, livres, jeux</small></span>
      </div>
      <div>
        <img src="linge-de-toilette-fourni-gite-moelan-dur-mer-tigoudoul.jpg" alt="Marie la propriétaire du gite ti Goudoul">
        <span class="center"><h5>Linge à disposition</h5>
          <small>draps, serviettes de toilette, torchons</small></span>
      </div>
    </article>


Lorsque dans Chrome je mets mon écran à une taille <480px, les 4 images restent sur la même ligne. Pour corriger cela j'ai ajouté
max-width: 300px;
à l'élément
.photosx4 div img
. Je ne suis pas sûre que cette façon de procéder soit la bonne.

Pour info il s'agit de la page https://gite-moelan.fr/home/home.html

Merci pour votre aide.
Cordialement
Modifié par gite-tigoudoul (21 Jan 2024 - 11:18)
Modérateur
Bonjour,

Si tu souhaites garder les 4 images sur une seule ligne , je te proposerais plutôt un
max-width:100%;
et pour le parent .photosx4 div un justify-content: flex-start; pour l'alignement

cdt
Bonjour,
Je pense que tu n'as pas regardé l'exemple que j'avais posté dans un précédent message, c'est une solution simple utilisant les grids pour avoir 4 images en ligne, et 2 en dessous d'un seuil, 900px dans l'exemple, ça évite d'avoir 3 photos et 1 en dessous, ce qui arrive avec wrap

https://codepen.io/farang/pen/RwdVYvy

Est-ce que ça répond au problème ?
Meilleure solution