Hi James

As there is no hover state on a mobile device the GridGallery is limited to just showing the linked image. To change this to show just the text instead try adding the following to the Custom CSS field of your tempates parameters...

@media only screen and (max-width: 1024px) {

.no-touch .j51griditem figure img,

.j51griditem figure.cs-hover img {

  -webkit-transform: scale(1.2);

  -moz-transform: scale(1.2);

  -ms-transform: scale(1.2);

  transform: scale(1.2);

}

.no-touch .j51griditem figure figcaption,

.j51griditem figure.cs-hover figcaption {

  opacity: 1;

  -webkit-transform: translateY(0px);

  -moz-transform: translateY(0px);

  -ms-transform: translateY(0px);

  transform: translateY(0px);

}

}

Ciarán

Hi:
I tried the code you said to enter and it's not working for me. I want to be able to see the caption on mobile devices since there is obviously no "hover" ability. Perhaps you can just built this in automatically to the templates.

http://bludovedemo.com/graetz/

Thanks!
Lisa

Hi Lisa

Try adding the following to the Custom CSS field of your templates parameters...

@media only screen and (max-width: 1024px) {

.j51gridgallery figcaption {

    opacity: 1 !important;

}}

Ciarán

Hello Ciaran
Thank you for the lovely template first of all. I'm working with Calibra, and have the same issue with the grid gallery on tablets (Samsung Tab S 10". I've tried adding both the below (singly and together as I wasn't sure) but no effect on my site - I still just get the pictures and no captions.
Could you suggest anything else at all please? The pictures come up and if you click them they go to the right places, but there's just no words to describe what they're for?
I look forward to hearing from you.
My site is http://www.psychic2spirit.com
Many thanks
Liz

Hi LIz

Try adding the following to the Custom CSS field of your templates parameters which will have the hover state of your images as default (inc. caption) on any touch devices...

.touch .j51griditem figure figcaption, .j51griditem figure.cs-hover figcaption {

    opacity: 1 !important;

    transform: translateY(0px) !important;

}

Ciarán

Ciaran,

Many thanks - that worked a treat.

Thank you for your superb support. B)

Best Wishes

Liz

Hello Ciarán

I'm also using Habitat and I have the same problem. On smaller devices the Caption text is not shown. I tried the given css styles. But it won't work.

Do you have more suggestions?

Thanks
Kees

Hi Kees

Would you have a URL to an example of this issue?

Ciaran

Yes I have: -removed- by Kees

Thank you

To amend you can add the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

.touch .j51gridgallery figcaption {

    display: block;

    opacity: 1;

}

Ciaran

Hallo Ciaran,

Thanks, That works. Now I see the caption text always on small device. It's a solution.

Kees