Docs

[kiovic]

Hello X,

I create a lightbox that comes from a button using short codes but I’m stuck as to how to resize the video lightbox and position it in the center so it is clear and in the center of the screen. I tried using the customizer css but I could figure out was resizing but not positioning.

Thanks

[Rupok]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[kiovic]

This reply has been marked as private.

[Friech]

Hi There,

Thanks for the credentials. You can add this under Custom > CSS in the Customizer.

.ilightbox-holder.light {
	left: 25% !important;
    margin-left: auto;
    width: 600px;
    margin-right: auto;
}
.ilightbox-holder div.ilightbox-container {
	width: 100% !important;
}

Hope it helps, Cheers!

[kiovic]

hello,

thanks for the code but it does not accomplish what I want, I simply want a lightbox that is centered on the screen and not full screen.

[Rupok]

Hi there,

Thanks for updating. The above code should do that. Did you try that? Would you attach a screenshot after applying this?

Cheers!

[kiovic]

This made it full screen, it is centered, but I still want to control the size of the video because playing at full res in different screen sizes affects the viewing experience. Thank you for your patience.

[Rue Nel]

Hello There,

It seems that you haven’t inserted the code properly.

Please have the code updated and use this instead:

.ilightbox-holder.light {
    top: 30% !important;
	left: 50% !important;
    margin-left: -300px;
    width: 600px;
    margin-right: auto;
}

.ilightbox-holder div.ilightbox-container {
	width: 100% !important;
}

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

[kiovic]

You guys are on point!

Can you guys explain the controlling factors (What do the #’s mean) in this code? I’m sure me and others in the community would appreciate this feature.

Thanks!

[Joao]

Hi There

# means ID

. means CLASS

and tags will have nothing, for example <h1> will be just h1

but <h1 class="hello" id="hi"> will be h1 .hello #hi

If you want more information about this I reccomend you watching some tutorials about CSS selectors I personally like a youtube channel called devtips.

Hope that helps,
Joao

Joao

[Author]

Posts