1485 sujets

Web Mobile et responsive web design

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
Modérateur
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)
Prévenir un modérateur
Répondre au sujet
Aller à