Lightbox image size and center on mobile

[s3raphim]

I am having problems re-sizing and centering a lightbox image on our homepage.

At www.untamed.be - see the ‘play reel’ button, we have a video lightbox with the following code:

[image class=“home-video” src=“http://www.untamed.be/wp-content/uploads/2018/03/video-play-sm8.png” link=“true” href="//player.vimeo.com/video/258908500?autoplay=1" lightbox_video=“true” opacity=".055"]
[lightbox selector=".home-video" deeplink=“true” opacity=“0.575” orientation=“vertical”]

the lightbox works great, but the play button image is too small on mobile.

so I’ve added this custom CSS which DOES resize the video play button image… but it doesn’t keep the center alignment.

@media (max-width: 767px)
{ .home-video img
{
max-width: 250% !important;
display: block !important;
margin-left: 50% !important;
margin-right: 50% !important;
} }

So how to resize the video play button for mobile, but also keep it centered?

THANKS.

[lely]

Hi There,

Remove this custom CSS:

@media (max-width: 767px) { 
.home-video img{ 
max-width: 250% !important;
display: block !important;
margin-left: 50% !important;
margin-right: 50% !important;
} }

Margin left property is what makes it off center. Then I can see you have the following CSS too. 75px width for .home-video is what makes the button too small

@media (max-width:979px){
  .x-nav-wrap.mobile{
       background-color:rgba(0,0,0,0.9);
       padding-left:20px;
  }
     .home-video {
           width:75px !important;  /*This CSS make the  button small on mobile remove this line of code instead*/
           display:block;
           margin-left:auto;
           margin-right:auto;
           width:50%;
           margin-top:20px;
}
}

See this: https://screencast-o-matic.com/watch/cFfeVhDmV4. The way CSS execute is like this -> initially set the width to be 75px on all screen less than or equal 979px. Then it encounters another CSS that works on less than 767px, which sets current width to 250%. That means 250% of 75px which make it bigger. If you just want it bigger, no need for the CSS that you have shared above. Just remove this line width:75px !important; .

Hope this helps.

[s3raphim]

Got it. Very helpful explanation. The site is fixed now. Thank you.

[friech]

We are gratified that we’re able to help you with this,

Cheers!