[RÉGLÉ] Affichage en 3 colonnes sur grand écran -> ? sur smartphone

[RobertG]

Bonjour

Sur un site que je migre sous J4, j'ai des articles et modules qui utilisent une classe "one-third" pour placer 3 blocs côte à côte, la troisième utilisant en plus "last".
Le template utilisé est Astroid One.
Le code :

.one-third {
width:30.3%;
}
.last {
margin-right: 0 !important;
}
.one-third,  .one-fourth {
float:left;
margin : 10px 3% 10px 0 !important;
}

Existe-t-il une solution uniquement en CSS pour qu'au-dessous d'une certaine largeur, ces trois blocs s'empilent ?

Merci de vos conseils !

[dolmenhir]

Regarde du côté de la propriété "flex" et des attributs connexes

https://www.w3schools.com/cssref/css3_pr_flex.asp

Avec un complément en media queries, pour contrôler plus finement le moment ou tu bascules de colonnes en lignes

[RobertG]

Merci ! J'avais pensé aux media queries, mais je ne suis pas à l'aise avec le CSS, hélas...
Je viens de combiner les deux avec un flex passant de 30 à 100% pour les écrans de moins de 800 px de large, ça fonctionne bien quand je réduis ma fenêtre sur le PC, mais rien ne change sur le smartphone, malgré l'actualisation de la page, que ce soit sous Chrome ou Firefox !

[dolmenhir]

Vérifie en analysant le code renvoyé que t'as pas un résidu de css, ou utilise "!important" dans la définition de tes attributs
A noter que pour les media queries, généralement on en fait au moins 3, par type d'écran (desktop, tablet, smarphone).
Pour les mesures, autant se référer à celle utilisées par boostrap 5

https://getbootstrap.com/docs/5.0/layout/breakpoints/

NB : le float doit sauter si tu utilises du flex

[RobertG]

Merci ! J'avais oublié le float.

[RobertG]

Problème réglé. Lors de chaque modification du code dans les articles et les définitions de style, il y avait un décalage avant que le smartphone prenne en compte les nouvelles instructions.
Merci encore !