Masonry Gallery gutter widths

Hi @shivgohil,

If you can provide a link to your gallery page that we can look at we may be able to offer you some advice. It’s hard to give you any answers without seeing how your page is displaying.

It’s possible that other CSS is overriding the .fg-gutter-height element so you could try adding !important to the end to override any other CSS.

#foogallery-gallery-134 .fg-gutter-height {
   height: 2px !important;
}

If you can reply back with a link to your gallery we’ll be happy to take a look for you.

Phil,

Thank you so much for your response. My website is https://www.shiv.photo, I’ve used the same foogallery settings for all galleries on the site, however we can use page as an example.

https://www.shiv.photo/weddings-asian-wedding-gallery/

The foogallery setting is ‘normal gutter’ but I feel its still too much gap between the images.

Thanks again

Shiv

Hi @shivgohil,

Thank you for the website link.

I’ve tried tweaking the CSS as well without success to I’ll ask our front end expert Steve to jump in and give us some quick advice.

@steveush – are you able to advise the css to adjust the gutter size on a Masonry gallery set to 4 columns?

Hey @phillcoxon

Thanks for all your help so far. I’ve asked a few people now and it seems to be giving them a few headaches!

Hopefully @steveush can find the solution!

Thanks in advance once again!

Shiv

Hi @shivgohil,

The issue here is that the column layout uses percent sizes as it needs to fill the space. By default the normal gutter is 1% of the total width, which is why it is looking a bit large on a full width page.

To trim it down a bit I would recommend sticking with percent values instead of fixed pixels by simply decreasing the defaults for the 4 column layout to something like the below:

.fg-masonry.fg-masonry-4col .fg-item,
.fg-masonry.fg-masonry-4col .fg-column-width {
    width: 24.85%;
}
.fg-masonry.fg-masonry-4col .fg-gutter-width {
    width: 0.2%;
}
.fg-masonry.fg-masonry-4col .fg-item {
    margin-bottom: 0.2%;
}

This should give a much thinner gutter while still maintaining the total as 100% of the available width. 24.85% * 4 columns = 99.4% and then 0.2% * 3 gutters = 0.6% to make up the remainder. Of course you can fiddle with these values but ideally they should always add up to 100%.

To explain the above, the width: 24.85% property is the width of each column/item. The width: 0.2% property is the width of the gutters and the margin-bottom: 0.2% is the height of the gutters.

The above CSS is generic and should work for any Masonry gallery with a 4 column layout so it could theoretically be added to your sites styles.css file. This means all Masonry 4 column galleries on your site will use this new CSS. If you would rather apply it to just a single gallery then you can make use of the Custom CSS option and specify the gallery ID as you previously did. As an example, using the ID of foogallery-gallery-9404 from the https://www.shiv.photo/weddings-asian-wedding-gallery/ the above CSS would change to be the following:

#foogallery-gallery-9404.fg-masonry-4col .fg-item,
#foogallery-gallery-9404.fg-masonry-4col .fg-column-width {
    width: 24.85%;
}
#foogallery-gallery-9404.fg-masonry-4col .fg-gutter-width {
    width: 0.2%;
}
#foogallery-gallery-9404.fg-masonry-4col .fg-item {
    margin-bottom: 0.2%;
}

Thanks
Steve

@steveush

Ahh I see about the percentage values, if only I could see the world through the eyes of code, but this helping me a lot!

Thank so you so much for this, I’m going to try it when I have a chance in the next day or 2, I’ll keep you updated.

Thanks again!

Shiv

PS – @phillcoxon thanks for your help too!