Support Forum

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

Caption Layout - Adding no hover titles on mobile devices

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

6 years 1 month ago
Hello,

I am using the Zentools2 Captions Layout, caption-style-3, on Buildr and am trying to display static titles over a 3x3 image grid on mobile/touch devices.

The grid is an image style menu and on desktop the titles are displayed on hover, but obviously there is no hover on a mobile device and without titles it's hard to navigate with the images.

I have tried several suggestions but am not having any luck!!

Is anyone out there able to help?

Thanks in advance
  • artful's Avatar
  • artful
  • LIfetime Developer - Big Bamboo
  • 37 posts
  • 1 Thanks
  • Karma: 1
The administrator has disabled public write access.
6 years 1 month ago
Hi,

Try to add the following custom css code to make your captions visible on mobile devices.

Change the max-width value to your needs (use the value when your mobile layout is loaded)
@media (max-width: 680px) {
.caption-style-3 figcaption {
    height: 60px;
    opacity: 1;
}
}

Cheers
Joshua
  • Piotr Kunicki's Avatar
  • Piotr Kunicki
  • Moderator
  • 45 posts
  • 4 Thanks
  • Karma: 2
Last Edit: 6 years 1 month ago by Piotr Kunicki.
The administrator has disabled public write access.
6 years 1 month ago
Thanks Joshua,

That's awesome. I had to jiggle it a little to suit my precise needs but it gave me the start I needed. I really appreciate it.

FYI for anyone else with this issue I added this to custom css:

@media (min-width: 1367px) {
.caption-style-3 figcaption {
display: inherit;}

}

@media (max-width: 1366px) {
.caption-style-3 figcaption {
display: block !important;
height:18% !important;
opacity: 1 !important;
margin-bottom: 20% !important;
font-size:2em;
font-weight:600;
bottom: 20px;
}
.caption-style-3 figure img {
bottom:18px !important;

}
}
  • artful's Avatar
  • artful
  • LIfetime Developer - Big Bamboo
  • 37 posts
  • 1 Thanks
  • Karma: 1
The administrator has disabled public write access.
6 years 1 month ago
Hello,

Thanks for sharing your solution!

Cheers
Joshua
  • Piotr Kunicki's Avatar
  • Piotr Kunicki
  • Moderator
  • 45 posts
  • 4 Thanks
  • Karma: 2
The administrator has disabled public write access.

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers

Close