(DEBUT) Product Thumbnails disappear on mobile

Solved
MaryGherciu
Tourist
3 0 1

 

Hi, I'm using the Debut theme and can't make the thumbnails appear on the product page on mobile view.

They are displayed only if there are not more than 4 images. 

 

I'm familiar with the code, but can't figure out where exactly is the issue. 

 

The website URL is keymitt.com

0 Likes
dmwwebartisan
Shopify Partner
5684 1296 1664

@MaryGherciu 

Please add the following code at the bottom of your assets/theme.scss.liquid file

@media (max-width: 749px){
ul.product-single__thumbnails.product-single__thumbnails-product-template .slick-track { width: initial; display: flex;}
}

Hope this works.
Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
MaryGherciu
Tourist
3 0 1

Hi and thanks for your response. It didn't help, unfortunately.

 

Actually, the basic code has been changed previously, sorry for not mentioning it.

Let me know if you need the whole product template code

      {% if product.images.size > 1 %}
        {% if product.images.size > 3 %}
          {%- assign enable_thumbnail_slides = true -%}
        {% endif %}

        <div class="thumbnails-wrapper{% if enable_thumbnail_slides == true %} thumbnails-slider--active{% endif %}">
          {% if enable_thumbnail_slides == true %}
            <button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__prev thumbnails-slider__prev--{{ section.id }}">
              {% include 'icon-chevron-left' %}
              <span class="icon__fallback-text">{{ 'sections.slideshow.previous_slide' | t }}</span>
            </button>
          {% endif %}
          <ul class="grid grid--uniform product-single__thumbnails product-single__thumbnails-{{ section.id }}">
            {% for image in product.images %}
              <li class="grid__item {{ product_thumbnail_width }} product-single__thumbnails-item js">
                <a href="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"
                   class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
                   data-thumbnail-id="{{ image.id }}"
                   {% if enable_zoom %}data-zoom="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
                     <img class="product-single__thumbnail-image" src="{{ image.src | img_url: '110x110', scale: 2 }}" alt="{{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAlt: image.alt | escape }}">
                </a>
              </li>
            {% endfor %}
          </ul>
          {% if enable_thumbnail_slides == true %}
            <button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__next thumbnails-slider__next--{{ section.id }}">
              {% include 'icon-chevron-right' %}
              <span class="icon__fallback-text">{{ 'sections.slideshow.next_slide' | t }}</span>
            </button>
          {% endif %}
        </div>
      {% endif %}
    </div>

 

0 Likes
Quyen_Beo
Explorer
58 7 12

This is an accepted solution.

Find in your theme.css file this line of code and remove it. This line of CSS break the slider function on mobile

@media (max-width: 749px) {
ul.product-single__thumbnails.product-single__thumbnails-product-template .slick-track {
width: 100% !important;
}
}

Then it will show up like this

Quyen_Beo_0-1618592893908.png

 

Was my reply helpful? Please Like and ✔️ Accept Solution. This mean alot to me
MaryGherciu
Tourist
3 0 1

Thanks! You saved my day.