gap between posts in masonry

[lambert]

Hi

Please have a look: http://onlinetravel.co.za/packages/beach-destination/

I want to narrow the vertical gap between the posts. When I narrow the screen and it falls into 2 columns, the gap closes up, which is how I want it to look in full screen

Many thanks

Lambert

[lambert]

I have just noticed that if I change the width of my page slightly (pull it in from the right) the gap closes immediately. Could this be a problem with Weaver Xtreme?

[robfoster]

I used to have a masonry post page on my site that did a similar thing, i think it is a problem with masonry as opposed to the theme maybe @weaver or @scrambler can chime in as id like to revisit it sometime.

[Weaver]

This is due to the responsive design of Weaver Xtreme. The spacing between the masonry images is a % value, and will thus adjust with width.

You can add Custom CSS rules to tweak the desktop values of a 4 column masonry layout. These are the default styles.

.blog-post-cols-4 {
    width:            23%;
    margin:            5px 1% 0px 1%;
}

.blog-post-cols-4-span-2 {
    width:            47.9%;
    margin:            5px 1% 0px 1%;
}

Note there is interaction between the width and the margin widths. But they really need to be % based.

[scrambler]

You need to clarify what you mean by vertical gap.

if you mean the space between one post and the one below it in the same column, It appears to come from an extra 2% bottom margin applied to posts in 4 columns that is not here in the 2 columns.

The rule to add to Main options > Fonts & Custom > Custom CSS rule box to remove it, is

.blog-post-cols-4 {margin-bottom:0;}

@weaver, I wonder if this is an inconsistency. In addition to the rules you mention above that apply a small top margin of 5px, there is a rule

.blog-post-cols-4 {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: white;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    margin-bottom: 2%;
}

That adds that 2% bottom margin on 4 columns but not 2

[Weaver]

There is no rule I can find with margin-bottom: associated with blog-post-cols-4. I don’t know where the rule you supplied even comes from unless it is the Masonry JavaScript itself.

[Author]

Posts