Grid Button causing a revert to 3 Rows of Products rather than 4.

[Tusa Products]

Hey all,

 

I've altered the default bootstrap theme, and am displaying 4 product rows per page by default. This works fine in all but one case. If you actually click the grid button on any given product page, it will default to still showing four rows, but larger than they should be, and one gets bumped down a level, as shown in the screenshots below:

 

Correct display, when clicking a link to go to a product list page:

 

 

Incorrect display, after clicking the "grid" button on a product page:

 

 

I'm assuming that there's a width setting somewhere in a css that is causing this, but I can't for the life of me figure out where. I've gone through product_list.css and global.css without success. All of the width values for the product list seem to be based on percentages for the responsive aspect of the page rather than actual pixel counts.

 

I've also double checked product-list.tpl, and the code to display 4 products per row does seem adequate:

 

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

 

{if isset($products) && $products}

{*define number of products per line in other page for desktop*}

{if $page_name !='index' && $page_name !='product'}

{assign var='nbItemsPerLine' value=4}

{assign var='nbItemsPerLineTablet' value=4}

{assign var='nbItemsPerLineMobile' value=2}

{else}

{assign var='nbItemsPerLine' value=4}

{assign var='nbItemsPerLineTablet' value=4}

{assign var='nbItemsPerLineMobile' value=2}

 

Any help anyone could give to shed some light on this issue would be appreciated. Everything works perfectly, right up until you click that grid button.

[Tusa Products]

Well, once again, posting here has caused me to solve my own problem by sparking an idea, though I solved it in a way that wasn't really solving it. But in the event that anyone else has the issue, here's how I got around it. Somewhere in the code, there is still a reference to col-md-4. I can't find it. So, I went into global.css, and since I've no need for there ever to be three product rows displayed rather than four, I just cheated, and changed the col-md-4 responsive width setting to 25% (4 products) rather than 33.333% (3 products). This effectively solved the issue, but like I said, it's not the ideal solution if you're looking to utilize both rows of 4 and rows of 3 somewhere.

 

In global.css, search for:

 

  .col-md-4 {

    width: 33.33333%; }

 

And change it to:

 

  .col-md-4 {

    width: 25%; }

Edited July 15, 2015 by Tusa Products (see edit history)

[Tusa Products]

Additionally, I found that the list view was also messing up in a similar fashion as the grid view was. In fixing that, I located all the references to col-md-4 and changed them, so here's the real solution:

 

File is global.js, in the javascript (js) folder. Look for this code:

 

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

 

And change it to:

 

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