1307 sujets

Web Mobile et responsive web design

Bonjour,
dans mon css j'ai :
.colcont {margin:0;
  display: flex; /*important*/
  flex-direction: row;
  flex-wrap: wrap;}
.col {
  background: pink;
  margin: 1em;
  flex: 1; /*important*/
}


dans mon html je met :

<div class="colcont">
<div class="col ">...</div>
<div class="col ">...</div>
<div class="col ">...</div>
</div>


Mes colonnes sont ok pas de soucis sur pc, par contre lorsque je suis sur smartphone j'aimerai n'avoir qu'un seule colonne par ligne et actuellement dans cette configuration j'ai deux colonnes l'une à coté de l'autre et la troisième seule en dessous. Comment faire pour imposer une seule colonne par ligne ?
merci pour l'info.
j'ai essayé avec les media quieries mais sa ne fonctionne pas...
une idée du pourquoi ?
La partie de mon css est la suivante :

.colcont {margin:0;
  display: flex; /*important*/
  flex-direction: row;
  flex-wrap: wrap;}
.col {
  margin: 1em;
  flex: 1; /*important*/
  position:relative;
  padding-bottom:30px;
}

@media only screen and (max-width:500px){
.col {
    display:block;
    clear:both;
}
}
@media only screen and (max-width:700px){
.col {
    display:block;
    clear:both;
}
}
@media only screen and (max-width:800px){
.col {
    display:block;
    clear:both;
}
}



hello, je pense que tu devrais plutôt faire ton display:block; reset sur .colcont, car .col, en block ou autre, restent des enfant de ton élément en display:flex. ou bien tu leur fait un reset sur min-width ou flex-basis pour qu'ils occupent toute la largeur de la ligne. (clear, c'est dans un contexte d'elements en float qu'on l'utilise )
Modifié par gcyrillus (04 Mar 2019 - 19:01)