1. smithjd44
  2. Sherlock Holmes
  3. Commercial Templates
  4. Saturday, 16 August 2014
  5.  Subscribe via email
I am working a website using the Habitat template.

The Grid Gallery is working great when you mouse over using a desktop computer but fails to display text when viewing the website on a mobile device.

Does the Grid Gallery not work using mobile devices other than following a link if touched??

Thanks you.

James

PS: The website I am working on is located at the URL: http://yourcmswebsite.com
Accepted Answer Pending Moderation
0
Votes
Undo
Hallo Ciaran,

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

Kees
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 3
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 4
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 5
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 6
Accepted Answer Pending Moderation
0
Votes
Undo
Ciaran,

Many thanks - that worked a treat.

Thank you for your superb support. B)

Best Wishes

Liz
  1. more than a month ago
  2. Commercial Templates
  3. # 7
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 8
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Kees

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

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 9
Accepted Answer Pending Moderation
0
Votes
Undo
Yes I have: -removed- by Kees
  1. more than a month ago
  2. Commercial Templates
  3. # 10
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 11
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters
the trademark holder in the United States and other countries.