Bonjour,
J'ai le code suivant:
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é
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)
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)