Как отобразить мобильному посетителю только первый элемент списка

Question

Настройка

В настоящее время я перемещаю свои интернет-магазины из WooCommerce в Shopify. У меня год опыта кодирования в Python, но я новичок в Liquid.

Я хочу,

1. отображать горизонтальный список на всех страницах продукта, кроме страниц
2. отображать только первый li этого списка, если посетитель включен мобильный

---

Код

<main class="main-content js-focus-hidden" id="MainContent" role="main" tabindex="-1">
  {% if template.name != 'product' %}
    <ul class="banner-list-items">
      <li>
        item 1
      </li>
      <li>
        item 2
      </li>    
      <li>
        item 3
      </li>                  
      <li>
        item 4
      </li>          
    </ul>
  {% endif %}
  {{ content_for_layout }}
</main>

Этот код находится внутри theme.liquid.

---

Проблемы

Код удовлетворяет 1, а не 2.

Более того, я понимаю, что Liquid не может различать guish устройств, но JavaScript может. Я не знаю, 1) где поставить это JavaScript или 2) как правильно ссылаться на этот список, чтобы JavaScript отображал только первый элемент, если посетитель на мобильном телефоне.

Как я должен go about?

Возможно, проще создать 2 элемента списка внутри theme.liquid и использовать CSS, чтобы скрыть один из списков, в зависимости от используемого устройства. Не уверен, что лучше не делать это, скрываясь с JS.

Answer 1

Вам не нужно JS. Простой CSS должен помочь.

Создайте (например) указанный класс c в конце таблицы стилей, используя медиазапрос:

@media screen and (max-width: 640px) {
  .hide-mobile {display:none;}
}

Затем добавьте этот класс в HTML к элементам, чтобы скрыть на мобильном телефоне.