Flex : disposition des boites

Bonsoir,

Sur la page https://gite-moelan.fr/home/home.html je souhaiterais que chaque colonnes utilise les 100% de la largeur de l'écran pour tous les devices de taille <1024 px. Cela ne fonctionne que pour les devices <480 px. Débutante, je m'arrache les cheveux.

Merci pour votre aide,
Marie
Modifié par Raphael (19 Jan 2024 - 07:13)

Bonjour,
il faut simplifier et utiliser toutes les ressources des flexbox, un exemple pour les trois colonnes ici :

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

on utilise nth-child() pour cibler chaque colonne, et on donne avec flex:1 ou flex:2 des largeurs relatives aux trois colonnes : celle du milieu 2 fois plus large que les deux autres

Bonjour,

Il y a aussi une chose à laquelle il faut faire attention lorsque tu met en place des mediaqueries. Il n'y a pas que l'endroit ou elles sont dans la feuille de style mais aussi le poids des sélecteurs appliqués aux régles que tu veut modifier.

Si en amont tu as par exemple:

#photos div.bleu {/*styles*/}

et dans le bloc @media

#photos .bleu {/*styles*/}

La première l'emporte toujours, car le sélecteur à un poids supérieur. Il n'y a pas d'erreur, le code fait ce qui lui est demandé.
voir https://developer.mozilla.org/fr/docs/Web/CSS/Specificity (!important est à évité, il vaut mieux bien choisir ses selecteur ) et https://www.alsacreations.com/article/lire/1871-Maitriser-la-specificite-CSS-grace-a-Cascade-Layers.html si cela ne te parles pas

Cdt

Bonjour,

Merci pour vos réponses et votre pédagogie à tous les 2.
Mon problème est résolu.

Cordialement.
Modifié par gite-tigoudoul (19 Jan 2024 - 15:40)

bien joué !
Pour éviter 3 photos sur la ligne supérieure et une en dessous, une solution serait d'utiliser les grids plutôt qu'une flexbox, avec 4 colonnes au-dessus de 900px et deux colonnes en dessous, les grids sont faites pour ce genre de mise en page responsive

https://developer.mozilla.org/fr/docs/Web/CSS/CSS_grid_layout
https://css-tricks.com/snippets/css/complete-guide-grid/