Image titles and their visibility

Site URL: https://asunsoakedsky.com/

Hi there,

I'm having some trouble with image titles and their visibility on my site. Every single image on my site has a title that I've typed in. The titles aren't visible on mobile in portrait rotation.

I use two different image blocks on my site; the grid gallery, and the slideshow.

Grid: (USED ON THE LANDING PAGE) These titles are a hover feature and don't show up at all on mobile phone. Is there a way I can remove the hover function and have them just there on the image like it shows on the slideshow?

Slideshow: (USED ON LANDSCAPES, DOCUMENTARY AND COMMISSIONED WORK PAGES) These titles only show up in landscape rotation on the phone. Is there a way I can make them show up in portrait rotation?

Let me know if there's anything I can do!

Cheers,
Dale.

Can you share link to pages where you use grid & slideshow? Wee can check easier.

Sure thing:

Grid: https://asunsoakedsky.com/

Slideshow: https://asunsoakedsky.com/landscapes

Grid. I don't see title on hover on desktop?

Slideshow. Add to Page Settings > Advanced > Header (If you use Personal Plan > You can add Code Block > Paste below code)

<style>
  .sqs-gallery-block-slideshow .slide .meta {
    opacity: 1 !important;
    display: block !important;
}
</style>

Cheers, the grid one you have to open the images in their lightbox to view title.

2 minutes ago, tuanphan said:

Grid. I don't see title on hover on desktop?

Slideshow. Add to Page Settings > Advanced > Header (If you use Personal Plan > You can add Code Block > Paste below code)

<style>
  .sqs-gallery-block-slideshow .slide .meta {
    opacity: 1 !important;
    display: block !important;
}
</style>

 

I added this code block above my gallery block and I can't see the images.

I see title here, try refresh your browser or try other browsers

With grid, add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.yui3-lightbox2 .sqs-lightbox-meta {
    bottom: 0 !important;
}
}

Yes this works for grid gallery!!

Thank you!

https://asunsoakedsky.com/landscapes

On this page. I added the code block you said, above the gallery slideshow, and I can't see the images.

Add to Home > Design > Custom CSS

@media screen and (max-width:480px) {
.sqs-gallery-block-slideshow .slide .meta {
    display: block !important;
}
}

I had the same problem. This thread helped me too, thanks