2 kolumny produktow na komorki

[Jadorebio.com]

Hej,

Probuje przerobic product-list.css i global.css tak aby lista produktow na telefony pokazywala dwie kolumny zamiast domyslnie jednej. O ile samo podzielenie kolumn nie sprawilo mi problemu tak juz dopasowanie zawartosci tak. W momencie gdy nazwa produktu jest dluzsza wyrzuca dany produkt do linii ponizej. Problem identyczny jak tu: https://www.prestashop.com/forums/topic/370354-2-product-columns-for-mobile/

 

sklep: jadorebio.com (obecnie wrocilam do ustawien domyslnych, czyli jednej kolumny)

 

Czy ktos moglby mi pomoc w jaki sposob dostosowac zawartosc aby dwa produkty zawsze sie miescily w rzedzie?

Probowalam z czcionka, wielkoscia zdjec itp - ale to nie rozwiazuje problemu.

 

Z gory dziekuje!

[e_com]

Jeśli dwa bloki mają różna wysokość, robią się zęby i trzeci blok zahacza o pierwszy

Trzeba wyrównać bloki np. tak w product_list.css:

@media (max-width: 479px) {
    ul.product_list .product-name {
    font-size: 16px;
    line-height: 20px;
    min-height: 60px;
    }
}

Przykład dla trzech linijek nazwy produktu i tylko dla małych urządzeń.

[Jadorebio.com]

Super, dziekuje Wam bardzo. Drugie rozwiazanie pomoglo!

[wolfen1223]

Hej a mógłbyś powiedzieć jak zrobić te dwie kolumny na komórki?

 

[atomek]

Innym sposobem na wyświetlanie produktów (o różnej wysokości) w rzędzie może być zmiana sposobu ich wyświetlania na inline-block.

Na końcu pliku product_list.css dodajemy:
 

ul.product_list.grid > li {
    
    
    float: none;
    display: inline-block;
    vertical-align: top;
    zoom: 1; /* stare IE */
}

W pliku product_list.tpl przed i po elemencie ul.product_list dodajemy tagi {strip} ... {/strip}.

upraszczmy w pętli foreach kod do postaci jak w przykładzie poniżej:
 

{strip}
    <ul{if isset($id) && $id} id="{$id}"{/if} class="product_list grid row{if isset($class) && $class} {$class}{/if}">

    {foreach from=$products item=product name=products}
        <li class="ajax_block_product{if $page_name == 'index' || $page_name == 'product'} col-xs-12 col-sm-4 col-md-3{else} col-xs-12 col-sm-6 col-md-4{/if}">
        
        ....
        ....
        ....
        
        </li>
    </ul>
{/strip}

Należy włączyć kompilacje szablonu/wyczyścić cache

powinno działać (PS 1.6)