How to fix Slideshow not being displayed on mobile?

[D2RGEAR]

Hello,

https://d2rgear.com/

The slideshows in the above image are not being displayed on mobile (pictured down below):

Can this be fixed?

Regards

[D2RGEAR]

That option is not available in theme settings.

[salmanmukhtar]

@D2RGEAR 

In your base.css file, add this code at the bottom:

@media screen and (min-width:320px) and (max-width:767px){
#shopify-section-template--14369092108584__c6922214-0aa3-456b-8b04-e24805762fae .slideshow__controls.slider-buttons {
    display: flex;
}
#shopify-section-template--14369092108584__c6922214-0aa3-456b-8b04-e24805762fae  .slideshow.banner {
    height: 100px !important;
    min-height: 100px;
}
}

[D2RGEAR]

It's showing up now, but it's showing up incorrectly. It shows an image, if I disable the highlighted option in the second image; however, it doesn't display the text.

[salmanmukhtar]

Can you resume this for a while so that I can debug and share updated css with you? Also please put the css code I sent to you. 

[D2RGEAR]

Yes, it should be resumed now.

[salmanmukhtar]

Yes can you enable that option as well from theme settings?

[D2RGEAR]

It's enabled when you see no image.

When it's disabled, the image displays.

I disabled it.

Also, there are two slideshows. They're very close, so it looks like one.

The "previous" and "next" buttons are not needed.

[salmanmukhtar]

Checking now

[salmanmukhtar]

@media screen and (min-width:320px) and (max-width:767px){
.banner--small:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    min-height: inherit;
}
}

Please add this, it will show up like this:

[salmanmukhtar]

@media screen and (min-width:320px) and (max-width:767px){
#shopify-section-template--14369092108584__c6922214-0aa3-456b-8b04-e24805762fae .slideshow__controls.slider-buttons {
    display: none;
}
}

To hide next, previous arrows

[D2RGEAR]

It's either showing the text with no image or an image with no text.

Also, the other slideshow isn't displaying at all.