2 column of sub-category on mobile view

[mrchai]

Hi 

 

When we view on small screen mobile, sub-categories will be just 1 column. But when we view on wider screen mobile there will be 2 or more column sub-categories depend on how wider screen.

 

How can I make sub-categories be 2 column at least on small screen.

 

(see the attached)

 

Thank you

[mrchai]

Any suggestion?

[tuk66]

What URL?

[Teapot Creative]

Hi

 

In your product-list.tpl do you have this code, around about line 48:

 

{if $page_name == 'index'} col-xs-12 col-sm-4 col-md-3{else} col-xs-12 col-sm-4 col-md-4{/if}

 

I am pretty sure if you don't, change it to this you will get it to one column on mobile, just check that in global col-xs-12 is set to 100%.

 

Nick

Edited May 5, 2016 by Teapot Creative (see edit history)

[mrchai]

What URL?

Here is my URL:

http://www.sportcartonline.com/32-men-s-compression-men

 

 

Hi

 

In your product-list.tpl do you have this code, around about line 48:

 

{if $page_name == 'index'} col-xs-12 col-sm-4 col-md-3{else} col-xs-12 col-sm-4 col-md-4{/if}

 

I am pretty sure if you don't, change it to this you will get it to one column on mobile, just check that in global col-xs-12 is set to 100%.

 

Nick

Are you mean product grid view? But I mean on sub-categories.

I would like to make sub categories view has 2 column on small mobile screen such as on iphone5 or same screen size.

 

see the picture.

 

[tuk66]

Yes, product-list.tpl is the right file. This template is used in (almost) all lists of products - category, search etc.

[mrchai]

Yes, product-list.tpl is the right file. This template is used in (almost) all lists of products - category, search etc.

Now I have this one column category and 2 column product. My code

 

 {if $page_name == 'index' || $page_name == 'product'} col-xs-6 col-sm-4 col-md-2{else} col-xs-6 col-sm-4 col-md-3

 

Then

I edited as your suggestion {if $page_name == 'index'} col-xs-12 col-sm-4 col-md-3{else} col-xs-12 col-sm-4 col-md-4{/if}

The result on small screen mobile view is one column category and one column product.

 

and I cannot find col-xs in product_list.css

[tuk66]

col-xs-12 is for one column and col-xs-6 for two columns.

[mrchai]

col-xs-12 is for one column and col-xs-6 for two columns.

I would like it has 2 column category and 2 column product

Now my code is >    col-xs-6 col-sm-4 col-md-2{else} col-xs-6 col-sm-4 col-md-3

But still has 1 column catergory 2 columns product( 2 columns product is ok)

[tuk66]

I see

<div id="center_column" class="center_column col-xs-12 col-sm-9">

but even after changing to "col-xs-6" there is something else what makes just one column. Maybe padding, margin, other elements.

[mrchai]

I see

<div id="center_column" class="center_column col-xs-12 col-sm-9">

but even after changing to "col-xs-6" there is something else what makes just one column. Maybe padding, margin, other elements.

I didn't find this code in product_list.css and product-list.tpl.

<div id="center_column" class="center_column col-xs-12 col-sm-9">

It might be as you said about padding, margin or other elements. 

 

Are there a module that make category as carousel? I didn't find any, just ask you may be know.

 

Thank you