Help with changing the number of products in featured-products in mobile view in Brooklyn theme

[HariPrasanth]

Hello @PeanutButter 

Thanks for the response!

although the page https://meden-demo.myshopify.com/collections/all has the expected view, all the collection still shows one product per row

for ex: https://meden-demo.myshopify.com/collections/kelim-tapijten

The suggested piece of code didn't work 

Please send me the invite for the collaborator access, I can arrange it. 

[HariPrasanth]

Hi @PeanutButter 

I also noticed that in the page https://meden-demo.myshopify.com/collections/all the number of products per row is 4 in desktop and 2 in mobile, only in page 1.

page 2 and 3 has the default values (3 in desktop and one per row in mobile). if I go to page 2 and come back to 1, then the products per row are changed back to default.

very confusing

BTW, the code you suggested in timber.scss in the previous reply is working. 

[PeanutButter]

Hi, now that I see this I am pretty sure the issue is related with the Filter App by Searchly.  The collection-template.liquid's code is only being responsible of rendering the page on the initial load, then the app renders the following pages probably with javascript.

I have requested access to your site to take a look with permissions to see Themes, Apps and Settings

Also, can you please describe the steps you followed to install the Filters app? Did you add any code to the theme manually or did you use some type of automatic install?

[HariPrasanth]

Hi @PeanutButter 

Thanks for helping me out so far!

I have accepted the collaborator access request. Please have a check

I didn't follow any specific steps in installing the app. just installed and did data sync from the app.

[PeanutButter]

Hi @HariPrasanth ok, then it was the app automatically adding code to your theme cause in the code you pasted there was some code added by the app for sure

I will try to take a look tonight, if I cant then I will do sometime tomorrow

[PeanutButter]

As I suspected, issue had to do with Searchly App

To fix the issue with pages greater than 1 displaying only one row per product I changed the following in in Assets/searchly-filter.js

			$products.eq(i).addClass("medium--one-half large--one-third");

to this:

			$products.eq(i).addClass("one-half medium--one-half large--one-third");

Also, I added the fix for some rows with only one product in mobile at the end of Assets/timber.scss.liquid:

/*************************************************/
/*** customizations by https://peanutbutter.es ***/
/*************************************************/

// Prevent grid items with different height breaking the grid
@include at-query($max, $preMedium) {
  .grid__item.one-half:nth-child(2n+1) {
    clear: both;
  }
}

.

I added both fixes to your live theme as I was pretty confident about them

[HariPrasanth]

Thanks a lot, @PeanutButter.. works like charm!!

the fix you have applied is disturbing the collection list arrangement on the home page. this is the reason why I had to remove it yesterday.

[PeanutButter]

hi @HariPrasanth what issue are you experiencing with "disturbing the collection list arrangement on the home page" ?

Can you send screenshots/description about the issue?

[HariPrasanth]

Hi @PeanutButter 

Please find the screenprint below. 

The Moderne en Design Tapitijn and Kelim Tapijiten were placed next to each other previously.

 

[PeanutButter · Accepted solution]

Ok, I have modified and applied the code for timber so it only affects product grids and not that collection grid.  The modified code is:

/*************************************************/
/*** customizations by https://peanutbutter.es ***/
/*************************************************/

// Prevent grid items with different height breaking the grid
@include at-query($max, $preMedium) {
  .grid-uniform .grid__item.one-half:nth-child(2n+1) {
    clear: both;
  }
}

Now collections grid in homepage is ok and product grids in mobile always have 2 products per row: