Adjust Masonry gutter spacing

[HjalmarCarlson]

I know it’s possible to adjust the vertical spacing between masonry items with css, but in order to modify the gutter spacing I need to modify the function.js file.

Is there another way to adjust the gutter spacing without modifying core files?

[HjalmarCarlson]

To follow up on this, I noticed that there is a -15px margin that is being added to the gutters but when I overwrite those margins nothing changes.

Here is what I modified, located in sf-combined.min.css:

ul.blog-items.gutters {
    margin-left: -15px;
    margin-right: -15px;
}

[HjalmarCarlson]

I’ve also added this to the javascript editor:

$('.blog-items').isotope({
  masonry: {
    gutterWidth: 20
  }
});

[Mohammad – SUPPORT]

Hi,
Please provide me login detail to check and find solution.
Thanks
Mohammad

[HjalmarCarlson]

This reply has been marked as private.

[Kyle – SUPPORT]

Hi

Add this to your custom css:

.blog-masonry .masonry-items .blog-item {
  padding-left: 6px;
  padding-right: 6px;
}

– Kyle

[HjalmarCarlson]

Kyle,

I’ve add the css you shared but it didn’t change anything, you can see the page here: http://hjalmarcarlson.com/lab/hailnails/blog/

I believe that the gutters need to be modified in the masonry/isotope settings. Can this be done in the Atelier theme files?

[Kyle – SUPPORT]

Not sure how you’ve managed that, but it’s working fine on my demo

Probably the changes you have made are causing it to break like that

– Kyle

[HjalmarCarlson]

Kyle,

Do you have any suggestions on how to resolve?

Can you share your demo link? Then I can see what’s different.

[HjalmarCarlson]

I just removed all of the custom styles I have applied and added your css and it still didn’t adjust the gutters. The gutters are visible if I remove the border but they do not expand at all when you change padding value.

[Kyle – SUPPORT]

I promise you the css works without any other customisation, look here: http://d.pr/i/1g1G7/YpmsDUAZ

I’m not sure what you’ve done to get your blog looking like it is but it looks pretty messed up. Please remove all the customisation to the blog and add just my css, I’ve tested and it works

– Kyle

[HjalmarCarlson]

Kyle,

The way the blog looks is intentional, with the exception of the gutter spacing.

Also, if you look at my previous response, you’ll see I had already reverted all custom styles & theme modifications and even with the barebones Atelier theme it didn’t help. It’s since been reverted back.

A link to static image doesn’t help. Can please provide a live demo link?

[Kyle – SUPPORT]

Try this:

.masonry-items .blog-item {
  margin-left: 5px;
  margin-right: 5px;
  width: 33%;
}

To adjust, just change the %

– Kyle

[HjalmarCarlson]

Thanks Kyle, that did the trick.

[Mohammad – SUPPORT]

Hi,
Great thanks to Kyle.
Thanks
Mohammad