Button disappear on mobile version but show on Web version

Solved
Paintilab
Tourist
7 0 0

Hello!

can someone help me fix this error on my store? The slideshow button appears on web, but not on mobile.

MOBILE (no button)MOBILE (no button)WEB (button shop now)WEB (button shop now)

{%- assign arrows = arrows | default: section.settings.show_arrows -%}
{%- assign dots = dots | default: section.settings.show_dots -%}
{%- assign fadein = fadein | default: section.settings.show_fadein -%}
{%- assign autoplay = autoplay | default: section.settings.autoplay -%}
{%- assign time = time | default: section.settings.autorotate_speed | times: 1000 -%}

{% if section.settings.custom_color %}
    {% render 'customcolor_slideshow' %}
{% endif %}

<div class="halo-slideshow" data-section-id="{{ section.id }}" data-section-type="slideshow-section">
    <div class="slideshow slideshow--{{ section.settings.slide_height }}"
        {% if section.blocks.size > 1 %}
            data-slick='{
                "rows": 0,
                "dots": true,
                "arrows": false,
                "fade": {{ fadein }},
                "autoplay": {{ autoplay }},
                "autoplaySpeed": {{ time }},
                "infinite": true,
                "adaptiveHeight": true,
                "slidesToScroll": 1,
                "mobileFirst": true,
                "prevArrow": "<div class=&apos;slick-prev slick-arrow&apos;><svg class=&apos;icon&apos;><use xlink:href=&apos;#icon-chevron-left&apos; /></svg></div>", 
                "nextArrow": "<div class=&apos;slick-next slick-arrow&apos;><svg class=&apos;icon&apos;><use xlink:href=&apos;#icon-chevron-right&apos; /></svg></div>",
                "responsive": [
                    {
                        "breakpoint": 1100,
                        "settings": {
                            "dots": {{ dots }},
                            "arrows": {{ arrows }}
                        }
                    }
                ]
            }'
        {% endif %}>
        {% for block in section.blocks %}
            {%- assign img_url = block.settings.image_slide | img_url: 'master' -%}
            <div class="item">
                {% if block.type == 'image'%}
                    <div class="slide-image">
                        {% if block.settings.image_slide == blank %}
                            <div class="placeholder-background">
                                <span class="recommended_size">1920x600</span>
                                {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
                            </div>
                        {% else %}
                            {% if forloop.index == 1 %}
                                <a href="{{ block.settings.link1 }}"><img class="image-background" src="{{ img_url }}" data-sizes="auto" alt=""></a>
                            {% else %}
                                <a href="{{ block.settings.link1 }}"><img class="image-background lazyload" src="{{ 'loading.svg' | asset_url }}" data-src="{{ img_url }}" data-sizes="auto" alt="" data-image></a>
                            {% endif %}
                        {% endif %}
                        {% if block.settings.link != blank %}<a href="{{ block.settings.link }}"></a>{% endif %}
                    </div>
                {% else %}
                    {% if block.settings.video_link != blank %}
                        <div class="item slide-video youtube" id="slide-{{ block.id }}">
                            <div class="fluid-width-video-wrapper">
                                <!-- <div data-youtube="{{ block.settings.video_link }}"></div> -->
                                <iframe class="youtube-player" id="player_{{ block.id }}" width="100%" height="100%" data-video-id="{{ block.settings.video_link }}" src="https://www.youtube.com/embed/{{ block.settings.video_link }}?enablejsapi=1&rel=0&autoplay=0&mute=1" frameborder="0" allowfullscreen=""></iframe>
                            </div>
                        </div>
                    {% elsif block.settings.video_mp4_link != blank %}
                        <div class="item slide-video mp4" id="slide-{{ block.id }}">
                            <div class="fluid-width-video-wrapper">
                                <video class="video" muted playsinline preload="none" autoplay loop>
                                    <source type="video/mp4" src="{{ block.settings.video_mp4_link }}">
                                </video>
                            </div>
                        </div>
                    {% endif %}
                {% endif %}
                {% if block.settings.heading != blank or block.settings.sub-heading != blank or block.settings.slide-des != blank or block.settings.button_slide1 != blank or block.settings.button_slide2 != blank %}
                    <div class="slide-content content--{{ block.settings.alignment }}">
                        {% if block.settings.sub-heading != blank %}
                            <h3 class="slide-heading-sub animated">
                                {{ block.settings.sub-heading }}
                            </h3>
                        {% endif %}

                        {% if block.settings.heading != blank %}
                            <h2 class="slide-heading animated mega-title--{{ section.settings.text_size }} {% if block.settings.button_slide2 != blank %}uppercase{% endif %}">
                                {{ block.settings.heading }}
                            </h2>
                        {% endif %}

                        {% if block.settings.slide-des != blank %}
                            <p class="slide-text animated">
                                {{ block.settings.slide-des }}
                            </p>
                        {% endif %}

                        {% if block.settings.slide_countdown != blank %}
                            <div id="slide-countdown" class="slide-countdown animated" data-countdown data-countdown-value="{{ block.settings.slide_countdown }}">
                            </div>
                        {% endif %}

                        {% if block.settings.button_slide1 != blank %}
                            <a href="{{ block.settings.link1 }}" class="slide-button {% if block.settings.button_slide2 != blank %}slide-button2{% endif %} btn btn--primary animated" aria-label="link">
                                {{ block.settings.button_slide1 }}
                            </a>
                        {% endif %}

                        {% if block.settings.button_slide2 != blank %}
                            <a href="{{ block.settings.link2 }}" class="slide-button slide-button2 btn btn--primary animated" aria-label="link">
                                {{ block.settings.button_slide2 }}
                            </a>
                        {% endif %}
                    </div>
                {% endif %}
            </div>
        {% endfor %}
    </div>
</div>
{% schema %}
    {
        "name": "Slideshow",
        "max_blocks": 9,
        "settings": [
            {
                "type": "header",
                "content": "General"
            },
            {
                "type": "select",
                "id": "slide_height",
                "label": "Slide Height",
                "default": "medium",
                "options": [
                    {
                        "label": "Adapt to image",
                        "value": "adapt"
                    },
                    {
                        "label": "Small",
                        "value": "small"
                    },
                    {
                        "label": "Medium",
                        "value": "medium"
                    },
                    {
                        "label": "Large",
                        "value": "large"
                    }
                ]
            },
            {
                "type": "select",
                "id": "text_size",
                "label": "Text size",
                "default": "large",
                "options": [
                    {
                        "label": "Small",
                        "value": "small"
                    },
                    {
                        "label": "Medium",
                        "value": "medium"
                    },
                    {
                        "label": "Large",
                        "value": "large"
                    }
                ]
            },
            {
                "type": "checkbox",
                "id": "show_arrows",
                "label": "Show Arrows",
                "default": true
            },
            {
                "type": "checkbox",
                "id": "show_dots",
                "label": "Show dots",
                "default": true
            },
            {
                "type": "checkbox",
                "id": "show_fadein",
                "label": "Effect Fade In",
                "default": false
            },
            {
                "type": "checkbox",
                "id": "autoplay",
                "label": "Slideshow Auto Play",
                "default": true
            },
            {
                "type": "range",
                "id": "autorotate_speed",
                "label": "Change slides every",
                "max": 9,
                "min": 3,
                "step": 1,
                "unit": "s",
                "default": 5
            },
            {
                "type": "header",
                "content": "Custom Color"
            },
            {
                "type": "checkbox",
                "id": "custom_color",
                "label": "Turn on custom color",
                "default": false
            },
            {
                "type": "color",
                "id": "color_heading",
                "label": "Heading Color"
            },
            {
                "type": "color",
                "id": "color_text",
                "label": "Description Color"
            },
            {
                "type": "color",
                "id": "color_button_text",
                "label": "Button 1 Text Color"
            },
            {
                "type": "color",
                "id": "color_button_border",
                "label": "Button 1 Border Color"
            },
            {
                "type": "color",
                "id": "color_button_bg",
                "label": "Button 1 Background Color"
            },
            {
                "type": "color",
                "id": "color_button_text_hover",
                "label": "Button 1 Text Color Hover"
            },
            {
                "type": "color",
                "id": "color_button_border_hover",
                "label": "Button 1 Border Color Hover"
            },
            {
                "type": "color",
                "id": "color_button_bg_hover",
                "label": "Button 1 Background Color Hover"
            },
            {
                "type": "color",
                "id": "color_button_text2",
                "label": "Button 2 Text Color",
                "default": "#ffffff"
            },
            {
                "type": "color",
                "id": "color_button_border2",
                "label": "Button 2 Border Color",
                "default": "#667377"
            },
            {
                "type": "color",
                "id": "color_button_bg2",
                "label": "Button 2 Background Color",
                "default": "transparent"
            },
            {
                "type": "color",
                "id": "color_button_text_hover2",
                "label": "Button 2 Text Color Hover",
                "default": "#26292d"
            },
            {
                "type": "color",
                "id": "color_button_border_hover2",
                "label": "Button 2 Border Color Hover",
                "default": "#ffffff"
            },
            {
                "type": "color",
                "id": "color_button_bg_hover2",
                "label": "Button 2 Background Color Hover",
                "default": "#ffffff"
            },
            {
                "type": "color",
                "id": "color_arrow",
                "label": "Button Arrows Color"
            },
            {
                "type": "color",
                "id": "color_arrow_border",
                "label": "Button Arrows Border Color"
            },
            {
                "type": "color",
                "id": "color_dot",
                "label": "Button Dots Color"
            },
            {
                "type": "color",
                "id": "color_dot_border",
                "label": "Button Dots Border Color"
            },
            {
                "type": "color",
                "id": "color_text_countdown",
                "label": "Countdown Color"
            },
            {
                "type": "color",
                "id": "color_countdown_border",
                "label": "Countdown Border Color",
                "default": "#4b5b60"
            }
        ],
        "blocks" : [
            {
                "type": "image",
                "name": "Image SlideShow",
                "settings":[
                    {
                        "type": "header",
                        "content": "Image"
                    },
                    {
                        "type": "image_picker",
                        "id": "image_slide",
                        "label" : "Select Image",
                        "info": "Recommended Image: Width x Height (1920 x 720)px"
                    },
                    {
                        "type": "header",
                        "content": "Content"
                    },
                    {
                        "type": "select",
                        "id": "alignment",
                        "label": "Text alignment",
                        "default": "left",
                        "options": [
                        {
                            "value": "left",
                            "label": "Left"
                        },
                        {
                            "value": "middle",
                            "label": "Center"
                        },
                        {
                            "value": "right",
                            "label": "Right"
                        }
                        ]
                    },
                    {
                        "type" : "text",
                        "id" : "heading",
                        "label" : "Heading",
                        "default" : "Milancelos"
                    },
                    {
                        "type" : "text",
                        "id" : "sub-heading",
                        "label" : "Sub Heading",
                        "default" : "New Arrivals"
                    },
                    {
                        "type" : "textarea",
                        "id" : "slide-des",
                        "label" : "Slide Description",
                        "default": "Pellentesque habitant morbi tristique senectus et netus de malesuada fames den turpis megetas."
                    },
                    {
                        "type" : "text",
                        "id" : "slide_countdown",
                        "label" : "Countdown Time",
                        "info" : "2020/12/12 12:12:00"
                    },
                    {
                        "type" : "text",
                        "id" : "button_slide1",
                        "label" : "Button Text 1",
                        "default" : "Shop Now"
                    },
                    {
                        "type" : "url",
                        "id" : "link1",
                        "label" : "Button Link 1"
                    },
                    {
                        "type" : "text",
                        "id" : "button_slide2",
                        "label" : "Button Text 2"
                    },
                    {
                        "type" : "url",
                        "id" : "link2",
                        "label" : "Button Link 2"
                    }
                ]
            },
            {
                "type": "video",
                "name": "Video Slider",
                "settings": [
                    {
                        "type": "header",
                        "content": "Youtube"
                    },
                    {
                        "type": "text",
                        "id": "video_link",
                        "label": "YouTube video ID",
                        "default": "eTCtDW7O1aM",
                        "info": "[Find your YouTube video ID](https://docs.joeworkman.net/rapidweaver/stacks/youtube/video-id)."
                    },
                    {
                        "type": "header",
                        "content": "MP4"
                    },
                    {
                        "type": "text",
                        "id": "video_mp4_link",
                        "label": "Video link",
                        "info": "just choose one option: YouTube or MP4"
                    },
                    {
                        "type": "header",
                        "content": "Content"
                    },
                    {
                        "type": "select",
                        "id": "alignment",
                        "label": "Text alignment",
                        "default": "left",
                        "options": [
                        {
                            "value": "left",
                            "label": "Left"
                        },
                        {
                            "value": "middle",
                            "label": "Center"
                        },
                        {
                            "value": "right",
                            "label": "Right"
                        }
                        ]
                    },
                    {
                        "type" : "text",
                        "id" : "heading",
                        "label" : "Heading",
                        "default" : "Slideshow Heading"
                    },
                    {
                        "type" : "textarea",
                        "id" : "slide-des",
                        "label" : "Slide Description",
                        "default": "Use overlay text to give your customers insight into your brand. Select image and text that relates to your style and story."
                    },
                    {
                        "type" : "text",
                        "id" : "button_slide",
                        "label" : "Button Text",
                        "default" : "Shop The Collection"
                    },
                    {
                        "type" : "url",
                        "id" : "link",
                        "label" : "Slide link"
                    }
                ]
            }
        ],
        "presets": [{
            "name": "Slideshow",
            "category": "Slideshow",
            "blocks": [
                {
                    "type": "image"
                }
            ]
        }]
    }
{% endschema %}

 

attached slideshow code liquid.

0 Likes

Hello,
Please share your site url.
So that I can check and let you know the exact solution here.

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
Paintilab
Tourist
7 0 0
Natztech
Shopify Partner
648 177 433

@Paintilab  please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

 

@media only screen and (max-width: 429px){
#shopify-section-1578474099783  .halo-slideshow .slideshow .slick-list .slick-track .item  .content--middle .slide-button{
    display: inline-block  !important;
}
}

 

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

#shopify-section-1578474099783 a.slide-button.btn.btn--primary.animated {
    display: inline-block !important;
}
If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
Paintilab
Tourist
7 0 0

it works! thank you, also do you know if there is a way to display the button smaller on mobile?

0 Likes
Natztech
Shopify Partner
648 177 433

@Paintilab  
please paste below code at the bottom of the file.

 

@media only screen and (max-width: 429px){
#shopify-section-1578474099783 a.slide-button.btn.btn--primary.animated {
   padding: 12px !important;
    min-width: 100px !important;
}
}

 

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store

Add this css

@media only screen and (max-width: 429px){
#shopify-section-1578474099783 a.slide-button.btn.btn--primary.animated {
    padding: 12px 2px !important;
    min-width: 120px !important;
}
}
If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
Paintilab
Tourist
7 0 0

i added this code but still the size is the same on mobile/pc

code.PNG

0 Likes

Replace above code with

@media only screen and (max-width: 429px){
#shopify-section-1578474099783 a.slide-button.btn.btn--primary.animated {
    display: inline-block !important;
    padding: 10px !important;
    min-width: 70px !important;
}
}
If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes