Slideshow image not appearing on mobile browser

[HiddenStar]

Hi, my website is www.duofoundry.com.

I have tried using safari (tried clearing history, cookies and cache) and chrome on an iphone but the home page slide show is not showing up properly. Appreciate the assistance and thanks in advance!

[DigitalArtisans]

Do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:

@media (max-width: 749px){
    [id] .slideshow__title, .slideshow__subtitle{
    display: block;
 
}

[id] .slideshow__overlay{
   display: block;

}

[id] .slideshow__arrows--mobile ~ .slideshow__text-content--mobile,
[id] .slideshow__title--mobile,
[id] .slideshow__subtitle--mobile{
    display: none;
}

[id] .slideshow__overlay::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #d4af37;
    opacity: 0.4;
    z-index: 2;
}
}

Keep in mind that the overlay color for mobile needs to be changed manually if you ever change the yellow color. Just change the  #d4af3 code to any hex color you wish.  

Kind regards,

[HiddenStar]

Thanks for the reply. Could I understand what is causing the problem as I am trying to temper as little as possible with the code to ensure that I can still make changes in a flexible manner.

[HiddenStar]

Hi, it still does not work after pasting in the code.

[HiddenStar]

Sry for the spam here, but I wanted to update that I have fixed the problem by changing the image from a png to jpeg. Apparently the png file was too large in size and causing problems.

[DarisArcher]

Resurrecting this because I have the same issue except every image is a .jpg ~600kb so I know filesize isn't the answer. Do you have any other tips to check into? On Safari browser it plays through well enough for the first time and then completely screws up.