Fixed titles for Masonry Portfolio on mobile devices only

[Nomulus]

Following from my discussion on the comments page:

The hover effect is great on a masonry portfolio – that brings up the title.

Although, is there an easy way to have the title always displayed but only when on a mobile device that doesn’t support hovering? (ideally without pushing the picture up).

You mentioned you would be able to provide the CSS or an update for this. That would be awesome. Thanks

[Kyle – SUPPORT]

Hi

Not sure what you mean without seeing your link? Are you using the gallery type?

– Kyle

[Nomulus]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

@media only screen and (max-width: 767px) {
figure.animated-overlay figcaption{
opacity:1 !important;
}
}

Thanks
Mohammad

[Nomulus]

Thanks for the code, I tested it and unfortunately it didn’t change anything.

[Mohammad – SUPPORT]

Hi,
Please provide me specific page url to check.
Thanks
Mohammad

[Nomulus]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

Hi,

I changed the previous css to the code below in your theme options.

@media only screen and (max-width: 767px) {
    figure.animated-overlay figcaption {
    opacity:1 !important;
    }
    
    .standard-browser .thumbnail-gallery-alt-one figure.overlay-style .multi-masonry-img-wrap {
    -o-transform: translateY(-100px);
    -moz-transform: translateY(-100px);
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
   }
}

Hope it helps.

-Rui

[Nomulus]

Thanks you very much for that!

The box is appearring but the text was still invisible so I changed:

figure.animated-overlay figcaption {

to

figure.animated-overlay figcaption h4 {

and it is working now.

Thank you for your help.

[Kyle – SUPPORT]

Great, thanks Rui