Slideshow image not appearing on mobile browser

HiddenStar
Tourist
12 0 3

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!

 

0 Likes
DigitalArtisans
Tourist
155 12 27

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,

Hatim Ayoub | Designer | Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted
0 Likes
HiddenStar
Tourist
12 0 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.

0 Likes
HiddenStar
Tourist
12 0 3

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

0 Likes
HiddenStar
Tourist
12 0 3

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.

0 Likes