CSS needed to add margin around each image of the gallery

  • Resolved konehead

    (@konehead)


    2 years, 7 months ago

    Is it possible to add a margin around each image of the gallery?
    I can’t locate the right selector for the gallery element to modify.

    Thanks in advance!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Johannes Kinast

    (@goaroundagain)

    Hi @konehead,

    try #baguetteBox-overlay figure

    Thread Starter konehead

    (@konehead)

    Thank you for your timely response.
    I tried the below code in my global css but to no avail.

    #baguetteBox-overlay figure {
margin: 1em !important;
}

    Is the is the right syntax?

    Plugin Author Johannes Kinast

    (@goaroundagain)

    Do you have a live example?

    Thread Starter konehead

    (@konehead)

    I setup a test page in one of my WP test sites with your gallery first, then the Meow Gallery second. Notice the spacing between images in the second gallery?

    Here is the link:
    Test link for gallery…

    NOTE: After I select an image from your gallery opening your lightbox, it seems to open two instances. So I have to close it twice. Probably a conflict with the Meow Gallery Lightbox?

    • This reply was modified 2 years, 7 months ago by konehead.
    Plugin Author Johannes Kinast

    (@goaroundagain)

    The correct selector is #baguetteBox-overlay .full-image img

    But I don’t think margin is the right choice here. Better use max-width e.g. max-width: 90%;

    
#baguetteBox-overlay .full-image img {
  max-width: 90%;
}
    Thread Starter konehead

    (@konehead)

    Finally had a chance to try it, but it did not work.
    Any other thoughts?

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘CSS needed to add margin around each image of the gallery’ is closed to new replies.