adding "margin" to the top of grid items

[Clayton]

I added some margin between the grids in the default layout. I also want to add margin to the top of each item. I know that it’s not really margin, but relatively placed divs. I’ve been hacking on the plugin but I can’t figure out where the top attribute is set.

[Masonry Guy]

Hi Clayton,

You can just keep, margin-top or margin-bottom to wlme_item class. Like

.wlme_item{margin-top:20px;}

This should fix your issue.

Thanks

[Clayton]

the wlme_items are contained in wmle_item_holder which are absolutely positioned, so margin has no affect on the holders above or below. Using padding-top or bottom has the same issue, the space starts overlapping. It looks to me like the only way to add verical space between items to change the ‘top: ###px” value in the inline element. The thing I can’t figure out is where the inline value is being created.

[Masonry Guy]

Hi Clayton,

Really sorry for the delay reply due to festival time here. We are back to our full day working now.

The top are set by the masonry js to on the fly to manage the spacing.

Regarding the above fix i sent to you. That should work. I have tested that here and it is fine. Or can you send me your wp-admin details at info (att) masonrylayout (dot) com ? I will fix that for you.

Thanks

[Clayton]

Masonry Guy,

I’m using a Sass-based theme, so access to the theme files from wp-admin won’t be useful. I’ve tried adding margin-top:20px in the inspector. It just bumps the entire grid down. I’ve tried this on your demo site as well, same thing happens, entire grid moves down, space between the items stays the same.

When you say “The top are set by the masonry js” do you mean in the wmljs.js file?

-Clayton

[Masonry Guy]

Hi Clayton,

Please use My Custom Css plugin. You can keep the css there and it should work.

Ya, the top is auto calculated and set by masonry.js for better position.

Thanks

[Clayton]

Masonry Guy,

Ah, by plug-in you mean the theme’s style.php file! I added the styles there and it worked, thanks.

-Clayton

[Masonry Guy]

Hi Clayton,

I was talking about another plugin named My Custom Css (https://wordpress.org/plugins/my-custom-css/) where you can keep those css from wp-admin. Keeping it in style.php is not good idea though it works.

Thanks

[Author]

Posts