Tagged: 

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • March 7, 2025 at 1:26 pm #1478851
    mickhb

    Hello everyone,

    How can I increase the distance in the Masonry Gallery? I only have three options to choose from. It doesn’t work properly via CSS. I only want to increase the spacing between the images.

    March 7, 2025 at 4:45 pm #1478858
    Rikard

    Hey mickhb,

    Could you post a link to where we can see the element in question, and highlight your intentions a bit further please?

    Best regards,
    Rikard

    March 7, 2025 at 5:08 pm #1478860
    mickhb

    Hi Rikard,

    Of course. I would like to have more space in the upper images. I only have the option between no gap, 1px gap or large gap. But I would like much more.

    Thank you.

    March 8, 2025 at 12:54 pm #1478891
    Mike

    Hi,
    When I look at your screenshot I wonder if you want to have your masonry full width
    Screen Shot 2025 03 08 at 6.49.34 AM
    simply adding a larger gap will make your images smaller, please include a link to your site and advise.

    Best regards,
    Mike

    March 8, 2025 at 1:57 pm #1478897
    mickhb

    Hi Mike,
    The two images should not fill the full width and yet the gap between the two images should be much wider. It is clear that these will be correspondingly smaller. How can I create my individual spacing? This is a customer request.

    ZenVue

    March 8, 2025 at 2:13 pm #1478898
    Mike

    Hi,
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    .av-large-gap.av-fixed-size .av-masonry-entry .av-inner-masonry {
    right: 50px;
    bottom: 50px;
}

    Adjust to suit.
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    March 8, 2025 at 2:48 pm #1478902
    mickhb

    Thank you, Mike,
    I thought it would somehow address the space more directly with CSS. Then that’s the only way to do it.

    March 8, 2025 at 5:34 pm #1478906
    Mike

    Hi,
    This is how it is achieved, it works when I test, is it working for you?

    Best regards,
    Mike

    March 8, 2025 at 6:42 pm #1478912
    mickhb

    This could be so easy if you could simply enter a specific number of pixels other than large gap. 15 pixels is too small. My customer would like it to look like this from the layout.

    When I play around with CSS, the gap shifts to the left of the image and when I reduce the size, the gap to the right of the second image is also increased. Very confusing.

    • This reply was modified 21 hours, 18 minutes ago by mickhb.
    March 8, 2025 at 8:12 pm #1478917
    Mike

    Hi,
    The gap is not defined by a gap in pixels, it is defined by the “right:” as in the css above creating the “gap”.
    I couldn’t find your screenshot on your site, the css above was for 50px, not 15px.
    When you reduce the size of the page for testing, always reload the page so the javascript can recalculate.

    Best regards,
    Mike

    March 9, 2025 at 2:00 pm #1478930
    mickhb

    Hi,
    All right. It works. The only thing is that the spacing to the right also changes. It always needs some adjustment if you have multiple lines.
    Thank you.

    March 9, 2025 at 2:06 pm #1478932
    Mike

    Hi,
    Glad to hear that you have this working now, unfortunately the spacing to the right for multiple lines is something we don’t have a solution for in the way that it is created. Shall we close this thread then?

    Best regards,
    Mike

    March 9, 2025 at 3:06 pm #1478938
    mickhb

    Hi,
    Yes, thank you very much for your time!

    Best regards,
    mick

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘More space as large gap n the Masonry Gallery’ is closed to new replies.