search

getgrav / grav-premium-issues

Official Grav Premium Issues repository to report problems or ask questions regarding the Premium products offered.
https://getgrav.org/premium
7 stars 2 forks source link

[lightbox-gallery] Can't get the image with black borders in the Gallery View on Mobile #453

Open stbs01 opened 4 months ago

stbs01 commented 4 months ago

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 want to have around every image on my website a black stripe, like here as you see it from PC:

Screenshot 2024-07-02 at 17 42 59

(is is kind of OK-ish here, because the stripe on the bottom should be the same width as on the top - any ideas how to do it?)

Here is how I see images from my mobile devices:

Screenshot 2024-07-02 at 17 42 32 Screenshot 2024-07-02 at 17 44 35 Screenshot 2024-07-02 at 17 44 49

So - no image titles, no borders on top and bottom.

If you go to http://draft.teimur-bek-safiuli.com/works from your smartphone/tablet, you will see it.

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 commented 4 months ago

On my phone i see the close and the image title at the bottom, on desktop i see those plus side nav buttons.. Again it depends on the display size. the mobile device is too small to fit everythign, so per standard responsive design, essential items can be dropped.

Those are not really borders btw, it's simply 'padding'. On mobile its common to drop padding to give more room for the content, as wasted padding, only makes the image smaller. This is the CSS as it comes out of the box from GLightbox. You can of course play with more padding, but that just means targetting the elements in your custom CSS with an override to add more padding. Thre could be consequences of this though.

Please compare this to the demos of GLightbox:

https://biati-digital.github.io/glightbox/#examples

lightbox-gallery plugin simply uses the same CSS as provided by the original lightbox script. I'm not modifying things here, it's how the script works.