2 product columns for mobile?

[SsimonJohansson]

Hello!

 

I am trying to get my page to display two columns of products on mobile devices but I don't get it to work properly.

Here's what I've done so far in the "product-list.tpl"

 

I have changed this part below to "col-xs-6 col-sm-4 col-md-3{else} col-xs-6 col-sm-4 col-md-3" instead.

col-xs-12 col-sm-4 col-md-3{else} col-xs-12 col-sm-4 col-md-3

And as you see here I have set items per line to two.

{assign var='nbItemsPerLineMobile' value=2}

The results i get looks like this.

What do I do wrong?

 

 

[SsimonJohansson]

Anyone who has some input on this?

[SsimonJohansson]

Nobody?

[DrunkBug]

Could you give a link to live website?

[SsimonJohansson]

Could you give a link to live website?

Hi there!

 

http://ledkompaniet.se/index.php

[DrunkBug]

For me, everything is correct, I see two products in a row, and nothing similar to what you put in a screenshot

[SsimonJohansson]

For me, everything is correct, I see two products in a row, and nothing similar to what you put in a screenshot

I figured it was the long product name that made things a bit offset.

But when I go into categories there is still just one column?

[mickeyboy1]

Have you cleared your cache as it looks fine to me too

[DrunkBug]

Try to edit your /themes/default-bootstrap/js/global.js file. There's this line:

$('.product_list > li').removeClass('col-xs-12 col-sm-6 col-md-4').addClass('col-xs-12');

Try to comment out this line or change to addClass('col-xs-6'). There's also this line:

$('.product_list > li').removeClass('col-xs-12').addClass('col-xs-12 col-sm-6 col-md-4');

You could try to change to addClass('col-xs-6 col-sm-6 col-md-4')