Image Gallery Thumbnail Captions Don't Appear on iPhone

hwca,

So far I am not able to reproduce this on an IOS device. What is the link to the image gallery?

Alan

Hi Alan,

Thanks for your reply. I’m not sure which link you are after, the image gallery is on this page https://www.hwca.com.au/videos/ as stated in my OP

The captions on this page display correctly on my desktop, but do not show on my iphone.

Cheers

Is there something I’m not seeing? There are six items on the page and all of them link to video galleries.

That’s correct. That page is itself the image gallery in question.

Each of the 6 images in the image gallery links to a separate video gallery. There is no problem with the video gallery captions.

The issue is the captions display for each image correctly on desktop, but do not show on iphone.

Ok, then I am able to get the captions on an iPad so this behaviour is not on all IOS devices. I’m not sure what else could be done to make it work on an iPhone 4s.

Hi, I am having the same problem. The gallery captions are not showing up on iPhones. I have tested this on both a 5s and a 6+. However it does work on iPads. This is a major issue for me since captions are used for photo credits.

Any progress on a possible fix for this?

Thanks!

dano222 & hwca,

I found in the CSS that caption display is turned off for small devices. They are several ways to deal with this.

You can try adding this to your theme’s style sheet:

@media handheld, screen and (max-width: 600px) {
.mg-image-tiles .mg-thumbs .caption.below, .mg-image-tiles .mg-thumbs .caption.bottom
  {
    display: block !important;
  }
}

This will not work if the Maxgalleria style sheet is loaded after your theme’s style sheet. In that case you would need to create a custom style sheet containing the code above and have it to loaded with your gallery. The custom style sheet can be added to your gallery through the Advance tab when editing your gallery.

Or you can edit the image-title.css file in wp-content/plugins/maxgalleria/addons/templates/image-tiles folder and disable this behaviour deleting ‘display: none !important;’ or commenting it out as demonstrated below:

.mg-image-tiles .mg-thumbs .caption.below,
.mg-image-tiles .mg-thumbs .caption.bottom {
  /*display: none !important; */
}

Note, if you use this method, you have to edit the file again after each update.

Alan

I’ve just edited the file as instructed and now the image captions are displaying on my iphone exactly as I wanted.

Thanks Alan, much appreciated!

Thanks. I’ll mark the issue resolved.

Worked for me also. Thanks Alan for the quick resolution!