Label Theme - Change from a list of single images to a grid when browsing a collection on mobile

New Member
8 0 0

Hello all,


Currently on the mobile, when I click on a collection (Art Decor for example) it displays the products one at a time in a list (i.e. one image fills the screen). I am looking to have 2 products displayed at a time on the mobile - is this possible? 


Below is a section of the collection-template.liquid I have been altering. I tried changing the 'small-one-whole' code below (in bold below) to 'one-half' individually at all at the same time but with no success. I am getting close, it will display smaller images but they are all displayed on the right hand side with a big white gap on the left. Any ideas? 


This is the original theme code:


{% comment %}

For more information on collection tags:

{% endcomment %}

{% paginate collection.products by section.settings.no_posts %}

{% include 'breadcrumb' %}

{% comment %}
Use .grid--rev so that the collection tags appear below the products on mobile
{% endcomment %}

<section class="collection-page" data-section-type="collection" data-section-id="{{ }}">
<div class="grid--rev">
<div class="grid__item one-whole ">

<header class="grid--table collection-header">
<div class="collection__title grid__item large--one-half medium--one-third small--one-whole">
<h1 class="standard-index {% if collection.description != blank %}has-description{% endif %}">{{ collection.title }}</h1>
{% if collection.description != blank %}
<div class="rte rte--header collection-description feature-copy">
{{ collection.description }}
{% endif %}
<div class="grid__item text-right large--one-half medium--two-thirds small--one-whole small--text-left collection__sorting">
{% include 'collection-sorting' %}

{% comment %}
Use class grid-uniform to have evenly sized columns clear
each other properly at each breakpoint.
{% endcomment %}
<div class="grid-uniform product-grid">


Preview link to shop is