Slider Rev images not showing on iOS mobile

I think there is a CSS or some issue with my slider. It works perfectly responsive for computer, and it works for the Android mobiles as well, but it doesn’t show the images on iOS. I did recently notice that the images were ‘slivers’, so I think it’s a CSS sizing issue that isn’t being addressed in iOS. The website is gayweddingceremoniesnyc.com

Thanks!

Hello @jrhager84,

Thanks for writing in! This issue could just be related to caching. Please keep in mind that you have installed a caching plugin WP Fastest Cache, please clear your plugin cache and regenerate the minified JS/CSS files before testing your site. This can cause the changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.

And please clear your browser cache too. You may use private browsing mode in testing your site to make sure that you are viewing the latest codes from the updates and not the cached version in your browser.

Kindly let us know how it goes.

I’ve cleared all caches numerous times to no avail.

I should also note that this site is ‘done’. It is a live site.

Hi @jrhager84,

Would you mind trying to try testing for a plugin conflict? You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

If the issue is still present, please provide us with the admin access to your site in a Secure Note:

Disabling plugins did nothing. I’ve attached the admin access to my OP

This is what I see on my iPhone

Hi @jrhager84,

Thanks for the login details.

I have checked your website and what is causing the issue is this code that you have added in the Global CSS:

@media screen and (max-width: 480px) {
  img {
    width: 100% !important;
  }
}

Try removing the code then clear your cache.

Hope this helps.

That code is in my other sites and doesn’t conflict. How would I go about keeping that (it makes images fill the viewport on mobile) without having it affect the slider?

Hello @jrhager84,

Resolve your issue, please have your code updated and use this instead:

@media screen and (max-width: 480px){
    img{
        width: 100% !important;
    }

    div.tp-caption img{
        width: inherit !important;
    }
}

Please let us know if this works out for you.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.