Css to increase the gap between images in a tiled gallery

  • Unknown's avatar
    paleseptemberweb · Member ·

    Is it possible to add some CSS to increase the gap between the images in a tiled gallery?
    Thanking you in anticipation.

    The blog I need help with is: (visible only to logged in users)

  • zikriaahmad411 · Staff ·

    Hello!

    Yes, it is possible to increase the spacing between images in a Tiled Gallery using custom CSS.

    In Tiled Galleries, the layout is typically structured into rows and grouped items. The spacing between images can therefore be adjusted by targeting those elements.

    You can try adding the following CSS:

    .tiled-gallery .gallery-row { 
      margin-bottom: 15px;
    }
    .tiled-gallery .gallery-group {
      margin-right: 15px;
    }

    The margin-bottom controls the vertical spacing between rows, while the margin-right controls the horizontal spacing between images within each row. You can adjust these values depending on how much spacing you would like.

    To apply this, go to Appearance → Customize → Additional CSS, paste the code there, and publish your changes.

    If this doesn’t achieve the expected result, feel free to reach out to help@wordpress.com with your site URL, and we can take a closer look at your specific setup to provide more tailored guidance.

  • Unknown's avatar
    paleseptemberweb · Member ·

    Many thanks for the reply.
    Unfortunately that didn’t work for me so had a play about and found the code below did it.

    .wp-block-jetpack-tiled-gallery .is-style-columns .tiled-gallery__item, .wp-block-jetpack-tiled-gallery .is-style-rectangular .tiled-gallery__item, .wp-block-jetpack-tiled-gallery.is-style-columns .tiled-gallery__item, .wp-block-jetpack-tiled-gallery.is-style-rectangular .tiled-gallery__item {
    	padding: .6vw !important;
    }
  • zikriaahmad411 · Staff ·

    Hello!

    Thanks for sharing what worked for you, that’s really helpful.

    You’re absolutely right. The CSS you found targets the current Jetpack Tiled Gallery block structure (.wp-block-jetpack-tiled-gallery ... .tiled-gallery__item), which is why it works on your site.

    My earlier suggestion was aimed at the older Tiled Gallery markup, so it didn’t apply to your setup. Thanks for taking the time to test and identify the correct selector.

    If you’d like any further tweaks (for example adjusting spacing separately for mobile vs desktop, or fine-tuning alignment), feel free to let us know.

    And for more detailed assistance with custom CSS or layout-specific adjustments, you can always reach us at help@wordpress.com with your site URL, we’ll be happy to take a closer look and help refine it further.

Log in or create an account to reply