LIGHTBOX - how to center the image on mobile?

Design help Custom code
1

Hey guys! :wave:

I’m using this code to hide the thumbnails in the lightbox:

<style>
.w-lightbox-strip {display: none;}
.w-lightbox-group, .w-lightbox-group .w-lightbox-view, .w-lightbox-group .w-lightbox-view:before { height: 100%;}
.w-lightbox-content {margin-top: 0;}
</style>

The problem is that the lightbox image preview is not centered on mobile. Can anyone help me with the custom code here, please? :pray:

Here is my site Read-Only: LINK
Here is my live site: LINK

2

Hi there,

try this:

<style>
.w-lightbox-group, .w-lightbox-group .w-lightbox-view, .w-lightbox-group .w-lightbox-view:before {
    height: 100%;
}
.w-lightbox-content {
    margin-top: auto;
    margin-bottom: auto;
}

you might want to add “!important” to the css as well. Try without it first.