(HELP) I need to make my collection pages on my brooklyn theme to show 2 rows of products on mobile

Highlighted
Tourist
11 1 0

I've looked through a dozen other posts that had to do with this but I can't even find the code in the product grid to change from one-whole to one-half in the script. I've been searching for hours just to make this fix which is turning out to be very confusing. I just want 2 rows of products on mobile.

 

 

0 Likes
Highlighted
Tourist
11 1 0

Here is the code I try to find to change the one-whole to one-half:

 

<div class="grid__item grid-product {{ grid_item_width }}{% if sold_out %} is-sold-out{% endif %}">
<div class="grid-product__wrapper">
<div class="grid-product__image-wrapper">
<a class="grid-product__image-link{% unless product.featured_image.src== blank %} grid-product__image-link--loading{% endunless %}" href="{{ product.url | within: collection }}" data-image-link>
{% if product.featured_image.src== blank %}
<img class="grid-product__image" src="{{ product.featured_image.src | img_url: '1024x' }}" alt="{{ product.featured_image.alt | escape }}">
{% else %}
{% include 'image-style' with image: product.featured_image, small_style: true, width: width, height: height, wrapper_id: img_wrapper_id, img_id_class: img_id_class %}
<div id="{{ img_wrapper_id }}" class="product--wrapper">
<div style="padding-top:{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100 }}%;">
<img class="product--image lazyload {{ img_id_class }}"
data-src="{{ img_url }}"
data-widths="[180, 370, 590, 740, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ product.featured_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ product.featured_image.alt | escape }}"
data-image>

0 Likes
Highlighted
Tourist
15 0 0

Hi, thanks for this solution. And do you know how to change it on home page in featured collection?

0 Likes
Highlighted
New Member
5 0 0

Hello! Did you get this figured out at all? I have been through what feels like hundreds of threads looking for this solution.

0 Likes