[Resolved] I installed a plugin and it added padding or margins, how to change the padding?

[bluebit]

I installed WF Magnific Lightbox plugin on my generatepress website and made an image gallery, but it has created extra padding and margins that I want to reduce for the left and right and top bottom. How can I control this? Is there a custom css solution?

[Leo]

Hi there,

Are you referring to the 5px padding added by the plugin itself?
https://www.screencast.com/t/BCnRa1M1U

If so you can use the same CSS to overwrite it.

[bluebit]

yes the padding by the plugin itself, what the css I use so I can change the padding and margins, i got the custom css plugin installed. And how can I add gutter for in between the images, so basically what I’ll be doing is the changing the outside padding, margins to 0 and adding gutter maybe 2px so that the images have some spaces in between them, this way i save more space on the left, right, top, bottom on the outside edges of the pictures.

[David]

Hi there,

simplest method is this:

.gallery-icon {
    padding: 0 2px 2px 0;
}

[bluebit]

What’s the chrome extension called where i can see the website code? I’d like to do the hard method, since it will make look more even, especially on the right side.

[David]

Right Click > Inspect – you will be able to see the DOM ( markup ) in the Elements tab which will be open by default.

You can overcome the alignment offset:

.site-main .gallery {
    margin-right: -2px;
}

[bluebit]

yesss, thats the perfect code, fixed the problem, awesome support!!!!

[David]

Glad to be of help

[Author]

Posts