Problem with light box on mobile

Support
#1

Hi guys.

I have made a button with a videolight box. On PC it looks exactly as i want:

But on mobile it shows a lot of white padding around the video:

How do i get rid of the spacing?

I’m using two different buttons. On for mobile and one for PC.

The mobile button is:

[button style=“text-shadow: none; font-size: 0.8em;
font-style: normal;
font-weight: 600;
line-height: 1;
text-align: center;
text-transform: uppercase;
color: white;
padding: 22px; padding-left: 35px; padding-right: 35px;” class=“videoLightbox2” type=“flat” shape=“rounded” size=“large” href="//player.vimeo.com/video/305525953?autoplay=1" title=“Example”][x_icon type=“play-circle-o”] Afspil velkomstvideo[/button]

[lightbox style=“max-height: 500px;” selector=".videoLightbox2" opacity=“0.875” prev_scale=“0.75” prev_opacity=“0.75” next_scale=“0.75” next_opacity=“0.75” orientation=“horizontal”]

The PC button is:

[button style=“text-shadow: none; font-size: 0.8em;
font-style: normal;
font-weight: 600;
line-height: 1;
text-align: center;
text-transform: uppercase;
color: white;
padding: 22px; padding-left: 35px; padding-right: 35px;” class=“videoLightbox1” type=“flat” shape=“rounded” size=“large” href="//player.vimeo.com/video/305525953?autoplay=1" title=“Example”][x_icon type=“play-circle-o”] Afspil velkomstvideo[/button]

[lightbox style=“max-height: 500px;” selector=".videoLightbox1" opacity=“0.875” prev_scale=“0.75” prev_opacity=“0.75” next_scale=“0.75” next_opacity=“0.75” orientation=“horizontal”]

And my CSS is:

@media(min-width: 980px) {
/* for the video lightbox */
.ilightbox-holder div.ilightbox-container {
max-width: 900px;
max-height: 505px;
}

.ilightbox-holder {
left: 50% !important;
margin-left: -450px;
}
}

.ilightbox-holder.light {
border: 0px solid;
border-color: #f1f2f4;
border-radius: 2px;
padding: 0.5%;
opacity: 1 !important;
background: #fff;
}

.ilightbox-toolbar.light {
display:none !important;
}

.ilightbox-overlay.light {
background: #283c46;
}

Any idea on how to fix this?

My site is: https://fitnessformularen.dk/

If you wan’t in my login is:

#2

Hi There @coedam

Thanks for writing in! Could you please try adding the following CSS rule into your X -> Theme Options -> CSS and see if that helps.

@media (max-width:480px){
  .ilightbox-container {
    height: auto !important;
  }
}

Thanks!

#3

Didn’t work. Now i looks like this:

On this site: https://spisdinmaveflad.dk/medlemmer/den-ultimative-fedttabsrygsaek/

I have made the same concept, not with a button but with images. When you click the images a light box show up like this (on mobile):

I have used the same code, but i can’t make it work on my other page (the one that this tread is about).

I you wan’t to login to the other page, where it is working to look at the code (the pages is memership protected, so you must login to see it), the login info is exactly the same as the other site.

Hope you can help me.

Regards,
Christian

#4

Hi There,

To fix this issue, please add this custom CSS:

@media (max-width: 767px){
    .ilightbox-holder div.ilightbox-container {
        max-width: 630px;
        max-height: 350px;
    }
    .ilightbox-holder {
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%);
    }
}

@media (max-width: 480px){
    .ilightbox-holder div.ilightbox-container {
        max-width: 430px;
        max-height: 250px;
    }
}

Hope it helps :slight_smile:

#5

Didn’t work. The white background has it’s own life:

I wan’t it to be tight around the video - and responsive. The on the example i gave you with my other site (also Pro):

Why is it different? And sorry. But i need it to look better (the same).

Regards,
Christian

#6

Hi Christian,

You can try this code instead.

@media(max-width:767px) {
.ilightbox-holder.light {          
    background: transparent;
    box-shadow: none;
}
}

Hope that helps

#7

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