Slideshow image not appearing on mobile browser

Store Design

Topic summary

Issue: Mobile slideshow not rendering properly on iPhone (Safari and Chrome).

  • Proposed quick fix: Edit Shopify theme.scss.liquid and add a CSS block for mobile (@media max-width: 749px) to force slideshow titles/subtitles and overlay to display, hide certain mobile text variants, and add a colored overlay (::before). Note: the overlay color must be updated manually via its hex value.

  • Result: The CSS change did not resolve the problem for the original poster.

  • Resolution for OP: Converting the slideshow image from PNG to JPEG fixed the issue. The PNG was apparently too large, causing mobile loading/display problems.

  • Ongoing issue: Another participant reports the same symptom using .jpg images (~600 KB). In Safari, the slideshow plays correctly once, then breaks, indicating file size alone may not be the cause.

  • Status: The original case is resolved via image format change; the subsequent Safari-specific issue remains open with no confirmed solution.

  • Notes: Images and the CSS snippet are central artifacts; the CSS targets mobile behavior and overlay presentation.

Summarized with AI on December 13. AI used: gpt-5.
1

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!

2

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,

3

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.

4

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

1 Like
5

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.

6

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.