Number of items on a row with grid display (Brooklyn theme)

cb03801
Excursionist
19 0 3

Hi - I am having the same issue with changes to the "assign grid_item_width" only showing up when viewing in a laptop browser and not an iPhone. Can you clarify where to add this extra asset class to make the iPhone display 2 items in a grid rather than just 1?

0 Likes
dav-mcg
Shopify Staff
Shopify Staff
103 0 29

Hi there,

To make the phone display two items per row then you can add small--one-half to the variable like so:

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

 

The small--one-half essentially means that on smaller screens (i.e. phones) set the width to be divided into halves, therefore meaning that two items show up on a row. The medium refer to tablets while the large is for desktop. The part after the -- is for how many you want as mentioned in my first reply.

Hope that helps!

David

cb03801
Excursionist
19 0 3

This is brilliant, David -- THANK YOU!! Worked like a charm for my featured products on my home page.

Which liquid asset would I edit to get the same affect on my product pages within a collection?

Thank you!

David

0 Likes
dav-mcg
Shopify Staff
Shopify Staff
103 0 29

Hey David,

I'm glad this worked for you! For products in a collection the change should be made to the collection-template.liquid file.

You should see code similar to this:

21-07-8au13-lrvif

The same grid_item_width variable can be applied here so you can copy and paste what you have int the featured products file for this highlighted line.

David

cb03801
Excursionist
19 0 3

Perfect! Thank you!!

0 Likes
gratefulskinco
New Member
2 0 0

Hi this didn't work for me either, it's still showing 3 in a row. Is there something i'm missing? 

0 Likes
dav-mcg
Shopify Staff
Shopify Staff
103 0 29

Hi there,

Do you have a link to your store or can you provide an example of the code that you added please?

Warm regards,

David

0 Likes
gratefulskinco
New Member
2 0 0

Hello my website is www.gratefulskinco.com and the code I tried to replace is this one  {% assign grid_item_width = 'medium--one-half large--one-third' %}

with one of the ones below and it didn't work. 

"large--one-quarter"or for 5 products it would be"large--one-fifth"

0 Likes
dav-mcg
Shopify Staff
Shopify Staff
103 0 29

Hi,

Thanks for sending that on.

I wonder are you adding it to the correct file? For the changes to take place on a Collection Page (as opposed to the Home Page) you would use the collection-template.liquid file in the Sections folder.

Using the Chrome Developer Tools I manually changed the class names to be large--one-fifth and 5 were then shown per row as can be seen in the screenshot below

21-15-llly5-rur8v

Note: The Chrome Developer Tools are a handy way to see the output of the code on a page. Once refreshed it returns to normal and doesn't have any impact on your actual theme code.

Therefore I would double check that it has been added to the correct file.

Hope that helps,

David

 

0 Likes