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

[HariPrasanth]

Hello Experts,

I would like to change the number of products displayed as part of the featured products in mobile view.

Below is the screenprint of my store's home page on the desktop. The number of products(3 per row) is fine. whereas in mobile view there is only one product per row is displayed. I want to change this to 2 products per row.

can someone advise me on this

Thanks in advance!!

Store: https://meden-demo.myshopify.com/

password: Welcome01!

[PeanutButter · Accepted solution]

Hi @HariPrasanth 

Open file Sections/featured-products.liquid and search for this line:

          {% assign grid_item_width = 'medium--one-half large--one-quarter' %}

(around line 50)

and change it to this:

          {% assign grid_item_width = 'one-half medium--one-half large--one-quarter' %}

 We have added the one-half class to that product grid

[HariPrasanth · Accepted solution]

Hello @PeanutButter 

Thanks for the solution! it works!!

however, the number of products in a row in desktop view is changed from 3 to 4. Is this possible to bring this back to 3, while keeping the number as 2 in mobile view??

[PeanutButter · Accepted solution]

hi @HariPrasanth great that i could help!

Sure, change the code I send in my last message for this:

		  {% assign grid_item_width = 'one-half medium--one-half large--one-third' %}

[HariPrasanth]

Many thanks @PeanutButter 

Works perfectly!!

[PeanutButter]

You're welcome! Great that I could be of help

[HariPrasanth]

Hello @PeanutButter ,

May I also request another help that is similar.. I want to achieve the same with the number of products within the collection.

I did change the code like below in section>collection-template.liquid but didnt help. Can you please advise on this

 <div class="searchly-filter-products grid-uniform" data-ac-sort="{{ collection.default_sort_by }}">
{% assign grid_item_width = 'one-half medium--one-half large--one-quarter' %}
{% for product in collection.products %}
{% include 'product-grid-item' %}
{% endfor %}
</div> 

Thanks in advance!

[PeanutButter]

Will take a look sometime during the weekend but not sure when

[PeanutButter]

@HariPrasanth that is the line you should be editing.  However, on the first line of the code you have pasted I see the following:

<div class="searchly-filter-products grid-uniform" data-ac-sort="{{ collection.default_sort_by }}">

I see that you have installed the Filter App by Searchly https://apps.shopify.com/search-filter-upsell-cross-sell, right?

This apps usually render the product grid in the collection with custom some custom code from the app, so maybe this is why your edit to collection-template.liquid is having no effect...
I would need collaborator access to your site to take a look.  Let me know if you are willing to give me access and I will send a request.

[PeanutButter]

@HariPrasanth checked your site and I see that you have to columns in mobile working at https://meden-demo.myshopify.com/collections/all

However, as you can see in the above image there are rows where there is only one image.  This is caused because you have product images with different heights and this breaks the grid.  There is an easy fix for this, just at the following at the end of your Assets/timber.scss.liquid file:

@include at-query($max, $preMedium) {
  .grid__item.one-half:nth-child(2n+1) {
    clear: both;
  }
}