Ess Grid Lightbox resizing issues

Support
#1

Hi Guys,

I’m using Essential Grid with Vimeo embeds in a lightbox. When I resize the the window, the video resizes fine but the lightbox in which it sits maintains its size and creates huge padded borders above and below the video content.

Do you know what might be going on here?

Thank you for your advice in advance!

Also, I tried the instructions to this post but to no avail: https://theme.co/apex/forum/t/essential-grid-lightbox-on-mobile-has-big-white-box-around-it/17338

#2

Hi There,

Thanks for writing in! Could you please point out your referenced page URL as well, so that we can look into your issue.

Thanks!

#3

Sure, if you initiate any of the light boxes on this page and resize the browser you’ll see what I’m talking about:

http://www.newsite.irishadvocacynetwork.com/wp/

#4

Hi There,

Please add the following code to Theme Options CSS

.esgbox-opened .esgbox-skin {
  
    background: none !important;
}

Hope it helps

#5

Fantastic! That worked a treat, thank you so much!

#6

You’re welcome.

#7

Sorry guys, would you mind if I revisit this topic?

The CSS that you gave me did indeed make the background behind the video go from white to transparent. But there is still a border that can be seen with some feathering on it in smaller browser windows, would you know of any CSS code that may eliminate it?

Thank you again, you guys are always super helpful :slight_smile:

#8

Hi There,

Please update the previous CSS to this:

.esgbox-opened .esgbox-skin {
    background: none !important;
    box-shadow: none !important;
}

Hope it helps :slight_smile:

#9

That did the trick! Thank you so much !

#10

You’re welcome!
We’re glad we were able to help you out.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.