Debut theme: discrepancy on collection display between pc and mobile view

Annavittoria
Excursionist
29 0 15

Hi,

I'm trying to find out what did i mess up on my codes, since there is a discrepancy on the collection display between pc and mobile view.

screenpc.JPG

                screenmobile.JPG

As you can see from the screenshots, when I select the number on the "collection per raw" bar, it is correctly shown on the pc side, but not for mobile.

I'd like to achieve the same visualization on both ends, in particular I'd like to have 2 rows on both devices, but I'm forced to use "3 per row" if I want 2 on mobile, because if I select "2 per rows" on the bar, it will display only one on the mobile side.

I remember that I've already worked on some codes on this matter, but don't remember exactly where.

Hereunder the code on Sections>collection.liquid

<div class="page-width">
  {% if section.settings.title != blank %}
    <div class="section-header text-center">
      <h2>{{ section.settings.title | escape }}</h2>
    </div>
  {% endif %}

  {%- assign collection = collections[section.settings.collection] -%}

  {% case section.settings.grid %}
    {% when 2 %}
      {%- assign max_height = 530 -%}
      {%- assign grid_item_width = 'medium-up--one-half' -%}
    {% when 3 %}
      {%- assign max_height = 345 -%}
      {%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
    {% when 4 %}
      {%- assign max_height = 250 -%}
      {%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
    {% when 5 %}
      {%- assign max_height = 195 -%}
      {%- assign grid_item_width = 'small--one-half medium-up--one-fifth' -%}
  {% endcase %}

  {%- assign product_limit = section.settings.grid | times: section.settings.rows -%}

  <ul class="grid grid--uniform grid--view-items">
    {% for product in collection.products limit: product_limit %}
      <li class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
        {% include 'product-card-grid', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}
      </li>
    {% else %}

      {% for i in (1..product_limit) %}
        <li class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
          <div class="grid-view-item product-card">
            <a class="grid-view-item__link grid-view-item__image-container full-width-link" href="#">
              <span class="visually-hidden">{{ 'homepage.onboarding.product_title' | t }}</span>
            </a>
            <div class="grid-view-item__image-wrapper">
              {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
              {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
            </div>
            <div class="h4 grid-view-item__title" aria-hidden="true">{{ 'homepage.onboarding.product_title' | t }}</div>
            {% include 'product-price' %}
          </div>
        </li>
      {% endfor %}
    {% endfor %}
  </ul>

  {% if section.settings.show_view_all %}
    <hr class="hr--invisible" aria-hidden="true" />
    <div class="text-center">
      <a href="{{ collection.url }}" class="btn" aria-label="{{ 'collections.general.view_all_label' | t: collection_name: collection.title }}">
        {{ 'collections.general.view_all' | t }}
      </a>
    </div>
  {% endif %}

My address is www.pianodgirls.com

Any help would be appreciated.

Thanks in advance

Annavittoria

0 Likes