Lightbox Shortcode- image too small on mobile

[EarlySigns]

Hi there,

I have tried to look through the forums but have not found an answer.
I have used the native Pro lightbox shortcode, with images showing up a decent size on desktop but on mobile way too small.
Is there a way to used css to remove some of the padding around the image in the lightbox when the image opens, to use more of the space? It seems to be 50% too small at the moment, not sure what to target haven’t been able to find anything in inspect element. Or to add to the shortcode html to configure the size of the image to be 100vh/vw when opened?

The shortcode is being used to create a lightbox from text - here it is incase I am adding some html here, instead of CSS. Any advice appreciated!

<a href="http://simplysignspreview.com/denzilinteriors/wp-content/uploads/2019/09/PinchPleatedHeading.jpg" class="lightbox-go" alt="curtain design pinch pleated"><h4 class="mtn"><span style="color: #808080;">Pinch pleated:</span></h4></a>

http://simplysignspreview.com/denzilinteriors/

[christian]

Hey Jayd,

Regretfully, I could not see a small lightbox image in your the link you provided. You’re also using Envira Gallery and not our theme’s lightbox shortcode.

I wonder if this issue is resolved? If not, please provide more details and screenshots.

Thanks.

[EarlySigns]

Hi there,

Apologies, the direct link to the page with the shortcode is here

http://simplysignspreview.com/denzilinteriors/bespoke-curtain-design/

Any of the text in grey, such as ‘Pinch Pleated’, ‘Wave’ etc has been designed with the Lightbox Shortcode. The lightbox is almost full screen in desktop, but only takes up 50% of the screen in mobile. Please let me know how to fix this, many thanks.

[nabeel]

Hey Jayd,

To fix this, try adding the following code in the Theme Options > CSS:

@media screen and (max-width: 767px) {
    .ilightbox-holder.light {
        left: 0% !important;
        top: 100px !important;
    }
    .ilightbox-holder div.ilightbox-container {
        width: 100% !important;
        height: 100% !important;
    }
}

Please note that since this is a custom code that changes the default behavior/display of the theme feature, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[EarlySigns]

Hi there,

That’s great, thanks so much!
I have one more issue I am hoping you can help me with. I have a lightbox connected to text, the video comes up fine when text is clicked but video will not play - instead when you click on it the video disappears. Any advice welcome - here is my code below thanks.

    <a href="http://simplysignspreview.com/denzilinteriors/wp-content/uploads/2019/09/2017_LL_Allusion-Blinds_compressed.mp4" link="true" 
class="lightbox-go" lightbox_video="true" alt="blind design allusion"><h4 class="mtn">Allusion:</h4>

[rad]

Hi Jayd,

It’s due to this custom CSS

.ilightbox-toolbar.light a {
    width: 100vw;
    height: 100vh;
    color: #fff;
}

It makes the close button equal to the screen size, basically making the entire clickable screen as close button. You may remove it.

Thanks!

[EarlySigns]

Hi there,

Thanks so much for spotting this, much appreciated!
It has done the trick.

[friech]

You’re more than welcome, glad we could help.

Cheers!