1274 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;
}
}