Essential Grid Lightbox on Mobile - Has big white box around it?

Support
#1

Hi, I am trying to get rid of the white box around the video player in the essential grid Lightbox with a vimeo linked video. The desktop version functions properly, with no white border around it, but on an iPhone, when you click the video link and the Lightbox function begins, the background darkens, but the video player pops up with a white box around it. See uploaded screenshot image here:

please help me loose this white box on mobile. thanks.

#2

Hi there,

Thanks for writing in!
could you please send your website URL where you have implemented the grid in a secure note so that we can have a look and give you a solution for that.

Thanks

#3
Summary

http://www.storyforstory.com/stories/

#4

I currently have this code placed in my custom CSS area:

/*Essential Grid Backbroung Customize
*/

.esgbox-overlay {
background-image: none !important;
background-color: rgba(0,0,0,0.8) !important; /Adjust 0.8 to your preferred level of opacity/
}
.esgbox-skin {
padding: 0px !important; /Adjust 5px accordingly/
background-color:#000;
color:#000;
}

and it’s still not taking away that white area on a mobile device.

#5

Hi There,

Please add the following code to Theme Options CSS

.esgbox-inner {

    height: auto !important;
}

Hope it helps

#6

Hey thanks, but that didn’t seem to help. I noticed it’s also doing it if I just scale the browser down on a laptop too. If you play one of the essential grid videos and the Lightbox is up, and then you scale the browser in, you’ll see the white background begin to become visible as the video scales down… any other suggestions?. REF Pic here…

Also, just FYI, I’m using the “Alternative Sources” tab on the post, with the Vimeo ID number entered in.
I would just love for that white area to be black, or transparent, but I’ll settle for black.

#7

Hello There,

Thanks for updating in! To change the white area into a black color, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

body .esgbox-type-iframe .esgbox-inner {
    background-color: black;
}

Hope this helps. Please let us know how it goes.

#8

that helped. thanks. it’s black now. One more thing. Is there any way to make that area not scale vertically when the vimeo video scales down? it would be great if It would stay tight to the video aspect ratio width and height.?

any thoughts?

#9

Hi There,

Could you try :

body .esgbox-type-iframe .esgbox-inner {
background-color: transparent;
}

Let us know how it goes.

Thanks!

#10

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