Изменить выбор слайд-шоу в зависимости от размера экрана - Shopify

Question

Я пытаюсь отобразить два разных слайд-шоу в зависимости от размера экрана в моем магазине shopify. Я создал раздел под названием section-mobile-slideshow и использовал следующий код для отображения этого раздела при обнаружении размера экрана мобильного устройства:

     #shopify-section-mobile-slideshow {
      display: none !important;
    }
  @media (max-width: 450px){ 
    #shopify-section-slideshow {
      display: none !important;
    }
    #shopify-section-mobile-slideshow {
      display: block !important;
    }
  }

Это прекрасно работает на мобильном телефоне, но на моем ноутбуке я вижу оба слайд-шоу. Как я могу скрыть слайд-шоу для мобильных устройств, если размер экрана превышает определенное количество пикселей?

Answer 1

Это точно так же. Как только вы удалили версию слайд-шоу P C на мобильном устройстве, вы можете использовать @media only screen and (min-width: 451px), а затем установить идентификатор слайд-шоу для мобильных устройств на display: none;.

Например:

@media only screen and (min-width: 451px)
{
    #shopify-section-mobile-slideshow
    {
        display: none;
    }
}

.