Problem with Responsive Columns PS 1.6

[gerardsm]

Hi all,

I have a problem with responsive columns, my web at normal desktop have 6 columns of product, in an Tablet have 3 columns and in a Smartphone have 2 columns.

At desktop vision I have any problem.

 

 

At the horizontal of smartphone and tablet anyone too.

 

 

 

 

But when I put smartphone or tablet at vertical this happen.

 

 

 

I know that the problem is in this code (product-lit.tpl) but I don't know what else change.

 

{if isset($products) && $products}
	{*define numbers of product per line in other page for desktop*}
	{if $page_name !='index' && $page_name !='product'}
		{assign var='nbItemsPerLine' value=6}
		{assign var='nbItemsPerLineTablet' value=3}
		{assign var='nbItemsPerLineMobile' value=2}
	{else}
		{assign var='nbItemsPerLine' value=6}
		{assign var='nbItemsPerLineTablet' value=2}
		{assign var='nbItemsPerLineMobile' value=3}
	{/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}
	<!-- Products list -->
	<ul{if isset($id) && $id} id="{$id}"{/if} class="product_list grid row{if isset($class) && $class} {$class}{/if}{if isset($active) && $active == 1} active{/if}">
	{foreach from=$products item=product name=products}
		{math equation="(total%perLine)" total=$smarty.foreach.products.total perLine=$nbItemsPerLine assign=totModulo}
		{math equation="(total%perLineT)" total=$smarty.foreach.products.total perLineT=$nbItemsPerLineTablet assign=totModuloTablet}
		{math equation="(total%perLineT)" total=$smarty.foreach.products.total perLineT=$nbItemsPerLineMobile assign=totModuloMobile}
		{if $totModulo == 0}{assign var='totModulo' value=$nbItemsPerLine}{/if}
		{if $totModuloTablet == 0}{assign var='totModuloTablet' value=$nbItemsPerLineTablet}{/if}
		{if $totModuloMobile == 0}{assign var='totModuloMobile' value=$nbItemsPerLineMobile}{/if}
		<li class="ajax_block_product{if $page_name == 'index' || $page_name == 'product'} col-xs-6 col-sm-4 col-md-4 col-lg-2{else} col-xs-6 col-sm-4 col-md-4 col-lg-2{/if}{if 
		$smarty.foreach.products.iteration%$nbItemsPerLine == 0} last-in-line{elseif 
		$smarty.foreach.products.iteration%$nbItemsPerLine == 1} first-in-line{/if}
		{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModulo)} last-line{/if}
		{if $smarty.foreach.products.iteration%$nbItemsPerLineTablet == 0} last-item-of-tablet-line{elseif 
		$smarty.foreach.products.iteration%$nbItemsPerLineTablet == 0} first-item-of-tablet-line{/if}{if 
		$smarty.foreach.products.iteration%$nbItemsPerLineMobile == 1} last-item-of-mobile-line{elseif 
		$smarty.foreach.products.iteration%$nbItemsPerLineMobile == 0} first-item-of-mobile-line{/if}
		{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModuloMobile)} last-mobile-line{/if}">

Thanks a lot.

[GenZai]

Hi gerardsm,

 

I've got the exact same problem !

Have you found a solution?

[ajaxthemestudios]

Hello

 

If you are making any changes, you should make sure it is reflected in the global.js file too.

Your bootstrap setting for vertical tablet and smartphone and the number of items to be displayed per line at different orientation also needs to be the same.

[gerardsm]

Hi Genzai,

Sorry for the late answer, I was on travel, you can fix it with CSS.

[gerardsm]

I solved a little the problem, but I keep with this problem.

http://www.discosparadiso.com/

I follow tutorials like this to solve the problem, but I don't found the error.

http://blog.belvg.com/how-to-change-default-grid-in-prestashop-1-6.html

Someone can help me?