Style BB light boxes?

Beaver Builder
1

Any advice on how to add CSS in the customizer in order to add a bit of margin to Beaver Builder light boxes? Here is page with light boxes: https://herofortheplanet.org/wolfquest/uncover/wolf-behaviors/

I just want to add “margin: 25px” for that area of text/content, but I can’t figure out how to successfully select it. I can make whole box disappear like this:

.fl-button-lightbox-content {
display: none;
}

so I know I’m close to selecting the right thing, but trying to add margin to above does nothing. Not a CSS/HTML aficionado so any help appreciated!

Anticipatory edit: And I know that since Lightbox content is just HTML, I can add it there, but I would like to add it just ONCE and not have to do that for every single Lightbox on the site (thus would rather add to “Additional CSS” in customizer). thanks!

2

You can try this CSS

.mfp-content .fl-button-lightbox-content {
    padding: 25px !important;
}
1 Like
3

Ah, I think that did it thank you! So padding not margin, got it. Thanks!!!

4

@wpbeaverworld Ah, could you help with one more question possibly?? Now my coworker (who had the original request) is wondering if we can make light boxes like 150px wider (75 each side). Same page would serve as example. Thank you in advance either way!!!

5

Here is the updated the CSS

.mfp-content .fl-button-lightbox-content {
     padding: 35px;
     max-width: 750px;
}