Showcase theme: product slider vertical align on mobile

[lenarei]

Dear community,

I am trying to change the way my product slider displays on mobile. It currently aligns all products horizontally in a slider carousel. This is perfect for desktop, so I would like to keep it there. But on mobile, I am trying to switch to a vertical align.

I have tested in my browser and found that changing ‘swiper-container-horiztonal’ to ‘swiper-container-vertical’ gives exactly the effect I am trying to produce. How can I ensure that ‘swiper-container-horizontal’ is used on desktop, while ‘swiper-container-vertical’ will be used on mobile? Is there a way to write if conditions based on the screen size?

    

      

        {% if section.settings.collection != blank %}
          {% assign collection = collections[section.settings.collection] %}
          {% for product in collection.products limit: 12 %}
            

              {% assign animate_delay = forloop.index | times: 0.4 %}
              {% render 'product-block', product: product, product_class: product_class, i: forloop.index, animate: animate_delay, show_vendor: section.settings.show_vendor, show_custom_title: section.settings:show_custom_title, hide_swatches: section.settings.hide_swatches, hide_reviews: section.settings.hide_reviews %}
            

          {% endfor %}

        {% else %}
          {% for i in (1..max_products) %}
            
              {% assign animate_delay = forloop.index | times: 0.4 %}
              {% render 'onboarding-product-block', i: forloop.index, product_class: product_class, animate: animate_delay %}
            

          {% endfor %}
        {% endif %}
      

      

      {% render 'svg-chevron-left' %}
      {% render 'svg-chevron-right' %}
    

This is the preview to the copy I am currently working on: https://2s8y2j8j0etoqtd0-60850798810.shopifypreview.com

Any advice will be greatly appreciated!

[LitExtension]

Hi @lenarei ,

Please send me screenshot of the section you want to change, I will check it for you

[lenarei]

Thanks @LitExtension , it is the first featured collection section on the landing page.

[LitExtension]

Hi @lenarei ,

Please go to theme.js file, find ‘theme.FeaturedCollectionSection’ and change code here:

theme.initProductSlider($swiperCont);

=>

if (window.innerWidth >= 768) {
  theme.initProductSlider($swiperCont);
}

Hope it helps!