1351 sujets

Web Mobile et responsive web design

Bonjour,

j'ai un problème conséquent avec bootstrap. Il s'agit du saut de colonne et plus précisément de la taille -xs-.

Effectivement; lorsque j'utilise des col-xs-12, tout va bien, mais lorsque j'utilise 2 fois col-xs-6, alors ou bout d'un moment une colonne prend 12 de place et fait passer l'autre à la ligne... Je ne comprends pas et j'espère que quelqu'un peut m'aider parce que ça m'arrive souvent.

Voici Mon html:
<footer class="container-fluid">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-6 col-xs-6">
<h3><span>Cartes cadeaux</span><br><span>Boutiques près de chez vous</span><br><span>Inscription aux emails</span><br><span>Réduction pour étudiants</span><br><span>Devenir membre</span></h3>
</div>
<div class="col-lg-2 col-md-2 col-sm-6 col-xs-6">
<p><span>Aide</span><br><span>Statut de la commande</span><br><span>Expédition et livraison</span><br><span>Retours</span><br><span>Modes de payement</span><br><span>Nous contacter</span></p>
</div>
<div class="col-lg-2 col-md-2 col-sm-6 col-xs-6">
<p><span>À propos de Mika Shoes</span><br><span>Infos</span><br><span>Carrières</span><br><span>Investisseurs</span><br><span>Développement</span><br><span>Durable</span></p>
</div>
<div class="col-lg-2 col-md-2 col-sm-6 col-xs-6"></div>
<div class="col-lg-2 col-md-2 col-sm-6 col-xs-6"></div>
<div class="col-lg-2 col-md-2 col-sm-6 col-xs-6">
<a href="xyz.com"><img src="images/facebook.png"></a>
<a href="xyz.com"><img src="images/instagram.png"></a>
<a href="xyz.com"><img src="images/yelp.png"></a>
</div>
</div>
</footer>

footer
{
background-color: #111111;
height: 40vh;
color: white;
margin: 0;
padding: 0;
}

footer a, footer a:hover
{
color: white;
}

footer .row
{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
display: flex;
justify-content: space-around;
}

footer p
{
font-size: .8em;
color: #7E7E7E;
}

footer .row [class*="col-"]
{
margin: 0;
padding: 0;
height: 100%;
line-height: 140%;
border: 1px red dotted;
}

footer .row [class*="col-"] h3, footer .row [class*="col-"] p
{
line-height: 240%;
cursor: pointer;
}

footer .row [class*="col-"] h3, footer .row [class*="col-"] p span:hover
{
color: white;
}

@media all and (min-width: 1200px)
{
footer h3
{
font-size: 1em;
}

footer p
{
font-size: .8em;
}

}

@media all and (max-width: 1200px)
{
footer h3
{
font-size: .7em;
}
footer p
{
font-size: .7em;
}
}

@media all and (max-width: 992px)
{
footer h3
{
font-size: .6em;
}
footer p
{
font-size: .6em;
}
footer .row div:nth-child(2), footer .row div:nth-child(3), footer .row div:nth-child(4), footer .row div:nth-child(5)
{
display: none;
}
}

@media all and (max-width: 768px)
{
footer h3
{
font-size: .5em;
}
footer p
{
font-size: .5em;
}
footer .row div:nth-child(2), footer .row div:nth-child(3), footer .row div:nth-child(4), footer .row div:nth-child(5)
{
display: none;
}
}

footer .row div:last-child
{
padding-top: 5%;
display: inline-block;
vertical-align: top;

}

footer .row div:last-child a
{
padding: 0 2vh;
}
et enfin ce que ça donne:

upload/1576682473-78216-capture.png
ce que je voudrais:
upload/1576682500-78216-capture2.png

PS: C'est à partir de 572 pixels que le problème arrive, je ne suis pas sûr que ce soit utile mais mieux vaut le mettre quand même :')
Modifié par Mikali (18 Dec 2019 - 16:21)
Bonjour,

tu utilises quelle version de bootstrap ? car avec la 4 il ne faut pas mettre -xs- et c'est du mobile first donc il faut ecrire plus logiquement comme ceci :

<div class="col-6 col-sm-6 col-md-2 col-lg-2">
Meilleure solution
bacasable, tu illumines ma journée, ça marche et en plus de ça je l'ignorais complètement! Étant donné que je suivais le cour d'openclassrooms sur bootstrap et qu'ils utilisaient la version 3, je n'en avais jamais entendu parlé et il me semblait donc clair que c'était xs...
Merci beaucoup Smiley biggrin
Modifié par Mikali (18 Dec 2019 - 20:01)