Probleme alignement colonnes sur Mobile (souci grid bootstrap?)

[syl2042]

Bonjour, 

Je fais un product-list.tpl personnalisé pour afficher une liste de produits. 

Je n'ai pas de souci pour rendre cette liste responsive, sauf sur petit ecran de téléphone. 

Aux alentours de 500 px de large, ma liste devient n'importe quoi. 

J'aurais besoin d'un petit coup de main SVP. 

J'ai essayé la liste en table, mais sans y arriver. Pour les 3 premières colonnes, pas de souci, mais dès que je mets le bouton d'ajout au panier dans une cellule, cela part en vrille. 

Je ne maîtrise pas trop les grid bootstrap pour arriver à m'en sortir. 

Je mets mon fichier ci-joint. 

Je préviens que le code est assez dégueulasse, car je fais pas mal de test. 

Pour faire un test et voir le problème, voici un exemple en cliquant ICI

Il suffit de diminuer la largeur du navigateur pour voir mon souci. 

Merci d'avance à la communauté. 

 

product-list-1.tpl

Edited January 19, 2019 by syl2042 (see edit history)

[Mediacom87]

Bonjour,

pour ne pas maitrisez, vous ne maitrisez pas, c’est déjà une bonne chose d'en être conscient 🙂

Bon, votre structure est complètement à l'envers, je m'explique, vous utilisez des classes CSS pour définir les largeur des éléments mais en plus vous utilisez les classe bootstrap pour faire la même chose, donc tout part en vrille.

Le responsive c’est tout bête, vous définissez des largeur d'éléments en utilisant un nombre de colonnes occupées par l'élément en fonction de la taille de l'affichage.

Donc, dans votre cas, vous aurez un truc du style

<li class="row">
  <div class="col-xs-4"></div>
  <div class="col-xs-4"></div>
  <div class="col-xs-4"></div>
</li>

Car vous souhaitez que chaque affichage soit sur un seule ligne.

Donc dès la taille d'écran la plus petite on affiche chaque élément sur 4 colonnes.

[syl2042]

Bonjour, 

Et merci du coup de main. 

Les CSS qui régissent la classe "row" sont ceux du thème. J'avoue que je n'y avais même pas jeté un oeil. 

Les voici. 

 

.row {
  margin-left: -15px;
  margin-right: -15px; }
  .row:before, .row:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */ }
  .row:after {
    clear: both; }

.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
header .row #header_logo,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px; }

.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11 {
  float: left; }

.col-xs-1 {
  width: 8.33333%; }

.col-xs-2 {
  width: 16.66667%; }

.col-xs-3 {
  width: 25%; }

.col-xs-4 {
  width: 33.33333%; }

.col-xs-5 {
  width: 41.66667%; }

.col-xs-6 {
  width: 50%; }

.col-xs-7 {
  width: 58.33333%; }

.col-xs-8 {
  width: 66.66667%; }

.col-xs-9 {
  width: 75%; }

.col-xs-10 {
  width: 83.33333%; }

.col-xs-11 {
  width: 91.66667%; }

.col-xs-12 {
  width: 100%; }

Voulez vous dire que je dois supprimer ces CSS, et régler les col dans le fichier direct? 

Il est sur que mon code est vraiment dégueu sur ce fichier et que je fini par m'y perdre... 

J'ai mis tous les XS à 4, mais cela ne résout pas le souci.. J'ai fais un test rapide... En conservant les CSS du thème... 

Mais je ne comprends pas. Ok pour XS à 4 sur petit ecran, car j'ai 4 colonnes. 

Mais juste pour que je comprenne, pourquoi un MD à 6, ou SM à 5, alors que j'ai toujours 4 colonnes, quelque soit la taille de l'écran. 

J'essaie bien de suivre les explications en ligne sur les Grid Bootstrap, mais je ne pige pas vraiment. 

MErci. 

[Mediacom87]

est ce que j'ai parlé d'ajouter d'autres classe col ?

Non, car comme expliqué dans votre cas, la structure de la ligen est toujours identique 3 élément réparti sur 12 colonnes soit 4 colonnes pour chaque éléments.

En définissant le plus petit affichage (xs) tous les autres affichages seront structurés de la même manière.

[Mediacom87]

Et aussi, est ce que j'ai laisser d'autres classes CSS, non , donc merci de retirer les classes pourris comme left-block, center block et right block qui ont leur width de forcé en pourcentage sur certaines dimension d'affichage, donc redondance avec les colonnes, donc à retirer.

Après si vous souhaitez jouer avec la largeur de chaque colonne, il faut juste que le total pour une dimension soit toujours égale à 12 par ligne.

[syl2042]

merci infiniment, je teste tout cela et revient vous dire... 

[syl2042]

Après si vous souhaitez jouer avec la largeur de chaque colonne, il faut juste que le total pour une dimension soit toujours égale à 12 par ligne.

 

C'est cela qui me perturbe... 
J'ai bien compris qu'une ligne était à 12... 
Mis c'est quoi le total de la dimension : la somme des variables XS, SM, MD, etc? 

 

EDIT : ok, je sors... Je viens de piger ... Si j'ai 4 colones, il faut que la somme de mes XS=12, SM=12,? etc... C'est bien cela? 

Edited January 19, 2019 by syl2042 (see edit history)