[lightbox-gallery] Can't set the title of the images in Lightbox Gallery on Mobile displayed under the image, not at the bottom of the screen

[stbs01]

Hi!

I am using a https://github.com/paulmassen/grav-theme-hyde Grav Theme (v0.2.2) with a Premium Lightbox Gallery Plugin (v1.0.6) on a Linux VPS Server. Now I have the following problem with the Lightbox Gallery Plugin:

I can't set the title of the images in Lightbox Gallery on Mobile displayed under the image, not at the bottom of the screen. Here see screenshots:

If you go to http://draft.teimur-bek-safiuli.com/works from your smartphone/tablet and click on any of the images, and try to swipe left, or right, you will see it. I want to have the same or similar interface as it is now if you see it from your PC.

Thanks for your help!

Best,
Teimur

studio@teimur-bek-safiuli.com

P.S. I have a pretty experienced guy who helps me to build my artist portfolio website, but here he cant help me anymore, that's why I need your help 🙏🏼

[rhukster]

I see the text at the bottom of the screen on mobile and desktop. This is actually working the same as desktop or mobile. if you resize your desktop smaller and the image takes up less vertical room, the text remains at the bottom. You can't expecxt mobile and desktop to display exactly the same size, as the devices have vastly different display sizes, and actually more impactful for images, desktop is landscale and mobile is portrait.. so there will be differences.

also try turning your phone sidewas to landscape and the effect is closer to a desktop view. This is just responsive web design.

[stbs01]

Thanks @rhukster for your reply. The problems I have are:

• image title is cut on the bottom if using iPad Pro 11
• the image title is faaar away from the image if using Google Pixel Android. Cant I get it closer to it, below it?

Any ideas here?

[rhukster]

I'm afraid I don't have either of those devices to test with.. but it comes down to the different screen sizes on each device. on a very talll device the text will be far away from an image, but flip it on it's side and it will be close.

The only option you have is to modify the css to put it right under the image. I've tried to do this in the browser developer tools and frankly it's tricky. The image div is actually absolutely positioned in the page, so the description div (which comes right after it) has no way to know where the bottom of the image is. The actual HTML of the output would have to be modified so the description was actually output inside the absolutely positioned image div.

I can find no real answers on GLightbox issue tracker either: https://github.com/biati-digital/glightbox/issues?q=description++position