Docs

[pdopchev]

Hi guys,

Bumped into a wall trying to customize the lightbox window of the Essential grid (when you click on a product). Trying to minimize the white space around the content but with no luck so far. Could you please take a look? So far have the following css for custom background and text color:

.esgbox-skin div {
background-color:#000;
color:#fff;
padding: 3px;}

link: http://www.dopchevproductions.com/test/store/

Thanks!

[Lely]

Hello There,

Thank you for the link and the screenshot. Please use the following custom CSS:

.esgbox-skin {
    padding: 3px !important; /*Adjust 5px accordingly*/
}

Hope this helps.

[pdopchev]

Great, that solves the centering issue! Only now the text looks glued to the white space around the box. How could I add some “padding” around it?

Thanks!

link:http://www.dopchevproductions.com/test/store/

[Nico]

Hi There,

Try adding this in your Customizer > Custom > CSS:

.esgbox-skin div {
padding: 3px;
}

Hope it helps.

Let us know how it goes.

Thanks.

[pdopchev]

It does work for adding padding around the text but it also seems to “push” the div to the right making the white background disappear….

*see attached screengrab

Any suggestions for a workaround it?

So far have the following css for the box:

.esgbox-skin div {
background-color:#000;
color:#fff;
padding: 3px;
}

.esgbox-skin {
padding: 3px !important; /*Adjust 3px accordingly*/
}

[Rad]

Hi there,

Please add this as well,

.esgbox-wrap {
    width: auto !important;
}

Cheers!

[pdopchev]

Great! It works perfectly!

[Nico]

Happy to hear that.

Feel free to ask us again.

Thanks.

[Author]

Posts