Lightbox container not aligned with content

Support
#1

I have added this:

Isolating the glute max muscle can be difficult for many of you! There are variously glute and thigh muscles that can activate during this muscle… you only want the biggest, most visible butt muscle to activate. Your goal is to be able to isolate that glute max muscle without the front, side, or back of the thigh activating. If you find that you are unable to prevent other muscles from turning on, try not to lift the hip as high off the ground! Just think about squeezing the glute, but don’t worry about how high the hip gets.
[x_icon type="play-circle"] Bonus Glute Info [lightbox selector=".lightbox-selector"]

to accomplish a content popup (see screenshot). Is there a way to make the white box align with how much content that’s inside? I would like for it to wrap around the text. I played around with a lot of CSS but no matter what I change there’s always extra padding after the text.

Similar, when I use the same setup with an image, the lightbox container won’t wrap around the image and text; the text is super wide. Can this be changed?

Is there a maximum set of lightboxes that could/should be used per page/website? Could it cause any functionality issues?

Thanks!!

Ann

#2

Hey Ann,

Regretfully, the X lightbox does not support text or HTML content. With that said, you’ll need to use other lightbox plugins that accepts text and HTML or have a third party developer build a custom solution for you.

Regarding the number of lightbox per page, there is no limit but, the more elements in the page you have the heavier it gets and that is not good for performance.

Thanks.

#3

I’m confused, I’m using html content and it is working though. Are you saying that this solution will eventually break or that I just can’t make the text box to align with the content?

Thanks!
Ann

#4

Hi Ann,

Can you provide us your site url so we can take a closer look.

Thanks

#5

Sure! I have it on multiple pages but here are 2 that you can look at:

https://132.148.19.177/step/2-1-6/
https://132.148.19.177/step/2-1-3/

Thanks!

Ann

#6

Hi there,

Thank you for providing the URL. We use the iLightbox plugin for the lightbox functionality which auto calculates the height of the content within the lightbox to show in different viewports.

It is strongly recommended to keep the behavior that way. But if you want to customize the behavior you need to add the CSS code below to X > Launch > Options > CSS:

.ilightbox-container {
    height: auto !important;
}

.ilightbox-container ol,
.ilightbox-container ul {
    margin-bottom: 0;
}

The main selector of the light box is .ilightbox-container so if select it or whatever code you have inside that section it will change the view of the light box.

As you may already know customization is outside of our support scope and the code above is just a helper to achieve your goal but we will not be able to support this in the future if it breaks for any reason as it is a helper code and not the official solution.

Thank you for your understanding.

#7

Thanks Christopher!

Totally understand that customization is outside the scope of your support, however, I’m confused about what you just wrote. “the lightbox functionality which auto calculates the height of the content within the lightbox to show in different viewports.” – it doesn’t though, right? It is giving me a massive padding at the bottom of the box if not filled with a certain amount of text. Please correct me if I’m wrong, but it appears to me that it is actually set to a minimum height and not auto height.

Let me know your thoughts!
Thanks!
Ann

#8

Hi there,

Yes, it tries to calculate the height but it it is different in any case. The example which you gave us had text in it and the plugin calculated the height is around 190 pixels:

I’m not sure why it is calculating the text height that way at the moment, my guess is that the lightbox knows more about block level elements such as images rather text. that is why I gave you the workaround which will override the height calculation via CSS.

Have you tried the CSS solution?

#9

Yeah, I was able to fix it with CSS but I didn’t want to keep it based on what you said about not supporting this kind of customization ‘if something breaks in the future’, I didn’t feel comfortable using it.

Thanks for all your help though!

ANn

#10

Glad to hear you managed to solve it.

Cheers!