Saut de ligne dans product-list.tpl sur mobile (ps1.6)

[martinkiteur]

Bonjour,

J'ai un soucis, le 1er bloc de la 2 ligne n'est pas aligné à gauche. https://www.magasin-glissevolution.com/14-ailes-de-kite

Je doit pas comprendre quelque chose pour afficher 2 produit par ligne en version mobile, auriez vous une idée ?

Voila un aperçu du fichier product-list.tpl :

{if isset($products) && $products}
    {*define number of products per line in other page for desktop*}
    {if $page_name !='index' && $page_name !='product'}
        {assign var='nbItemsPerLine' value=6}
        {assign var='nbItemsPerLineTablet' value=2}
        {assign var='nbItemsPerLineMobile' value=2}
    {else}
        {assign var='nbItemsPerLine' value=6}
        {assign var='nbItemsPerLineTablet' value=2}
        {assign var='nbItemsPerLineMobile' value=2}
    {/if}
    {*define numbers of product per line in other page for tablet*}
    {assign var='nbLi' value=$products|@count}
    {math equation="nbLi/nbItemsPerLine" nbLi=$nbLi nbItemsPerLine=$nbItemsPerLine assign=nbLines}
    {math equation="nbLi/nbItemsPerLineTablet" nbLi=$nbLi nbItemsPerLineTablet=$nbItemsPerLineTablet assign=nbLinesTablet}

....

  <li class="ajax_block_product{if $page_name == 'index' || $page_name == 'product'} col-xs-6 col-sm-2 col-md-2{else} col-xs-6 col-sm-2 col-md-2{/if}

 

Sur prestashop 1.6

 

Merci par avance.

[Alexaa]

Salut, 

Le problème visiblement, c'est la hauteur de tes encarts produits. 

Une piste : Si tu définies une hauteur identique à tes <li> produit, tout semble s'aligner correctement, sauf erreur de ma part. 

Exemple : 

ul.product_list.grid > li {
    padding-bottom: 20px;
    text-align: center;
    height: 400px;
}

Je ne sais pas si c'est vraiment la bonne manière de le résoudre, c'est au moins pour te donner une piste.

[martinkiteur]

1 minute ago, Alexaa said:

Salut, 

Le problème visiblement, c'est la hauteur de tes encarts produits. 

Une piste : Si tu définies une hauteur identique à tes <li> produit, tout semble s'aligner correctement, sauf erreur de ma part. 

Exemple : 

ul.product_list.grid > li {
    padding-bottom: 20px;
    text-align: center;
    height: 400px;
}

Je ne sais pas si c'est vraiment la bonne manière de le résoudre, c'est au moins pour te donner une piste.

Roooh, merci beaucoup 😃
Comme quoi des fois il vaut mieux demander de l'aide ^^

[Eolia]

Oui mais non car ce n'est pas responsive du tout de mettre une hauteur fixe

La règle est en css: 

/*Conteneur:*/

ul.class {
  display: flex;
  flex-wrap: wrap;
}

/*Contenant (par sécurité):*/
li.other_class {
	display: table-cell;
}

/*Verifier si body{height:100%}*/

Remplacez .class et .other_class par vos classes bien sûr

[Alexaa]

Bien d'accord sur le fait de faire autrement, c'était pour donner une piste de la problématique ici, moins sur la bonne solution à employer ; même s'il y a matière pas propre à jouer avec les @media. 

Merci pour ta correction et bon courage à Martin !