Featured collection: Show two images per row on mobile

Example after:

Before:

Note:

This change is only needed if your desktop setting is set to show 3 per row.

How to:

Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.

Make a duplicate before any code changes:

Next, open the Code Editor:

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

Quick link if the theme is live/published:
Open Code Editor

Open index-collection.liquid:

On the code side, find this section and line of code. We're looking under the when 3 section and the third line with small--one-whole:

It's usually line 15 on most versions of Pipeline. We're going to change whole to half:

Example old code for the entire line:

    {% assign grid_width_small = 'small--one-whole' %}

Example new code:

    {% assign grid_width_small = 'small--one-half' %}

Save the file.

Undo

Use the Older versions link at the top of the file if you need to rollback or undo this code change.