how can I show items in two columns on mobile?

[henryyao]

Hi,

 

I want to show more products on the screen in a more compact way, especially on mobile, I know there are a lot of themes, but I can't find any to support two columns view on mobile. Is that something I can achieve with theme? If so, where should I start from?

 

Thanks,

Henry

[JoelWebsites]

I was looking out for the same thing ...have you found the solution?

[henryyao]

it's actually pretty easy with @media

[jbhamers]

it's actually pretty easy with @media

 

hi henryyao,

how you get 2 column product homepage on mobile view with @media

i'm try to search about @media but still far to it..

thanks

[Hetko]

I would also like to know how this is working with @media or in any other way!

[anazmi]

I would also like to know how this is working with @media or in any other way!

 

This is what I did and it worked for me.

 

In your product-list.tpl file there should be a line like this:

 

<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-3{/if}

 

for me it was line 49.

 

change the col-xs-12 to col-xs-6 instead and it should show up in two columns.

[Hetko]

Awesome it is working! Thank you!

[sengok]

hello,

how about presta 1,7 ? thats work or not ? for make 2 columns in mobile version.

 

thank you

[mounir]

On 9/14/2015 at 6:07 PM, anazmi said:

 

This is what I did and it worked for me.

 

In your product-list.tpl file there should be a line like this:

 

<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-3{/if}

 

for me it was line 49.

 

change the col-xs-12 to col-xs-6 instead and it should show up in two columns.

please can you make a screen shot to know exactly where i find it because i'm not expert on prestashop

thanks

[Julio Barbosa]

Em 14/09/2015 às 22:07, anazmi disse:

 

Isso é o que eu fiz e funcionou para mim.

 

No arquivo product-list.tpl deve haver uma linha como esta:

 

<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-3 {/ if}

 

para mim foi a linha 49.

 

mude o col-xs-12 para col-xs-6 e ele deve aparecer em duas colunas.

onde encontrou este arquivo pode falar o caminho certim?

Edited June 22, 2021 by Julio Barbosa
erro (see edit history)

[paulormf]

On 6/22/2021 at 10:48 AM, Julio Barbosa said:

onde encontrou este arquivo pode falar o caminho certim?

Pelo ftp:
pasta /themes/default-bootstrap/