Adding margin between posts

Hey @ndar,

Thank you for reaching out to us. Currently, there is some custom CSS applied changing the margin of our columns:

#cff .cff-item{width: 22%;clear: none;padding: 0 2%;border: none !important;}

You should remove this, and in the plugin settings Facebook Feed > Customize > Feed Columns set the amount of columns here. These columns already have padding applied and you could then set the items to be ‘boxed’ with a background color under Facebook Feed > Customize > Style Posts > Post Style.

Best regards,

Hi Joel.

Thank you. Yes. I had applied some custom CSS from your website, but your proposed solution works better. Now, is there a way to expand the width of the boxes by a bit, so you see less of the background between them? I’ve tried changing the padding to no avail.

Thank you.

Hey @ndar,

No worries, while we don’t normally provide custom snippets for our Free users, the CSS you were originally using just needed some adjustment – the combined margins and width of the columns must match to be 100%, the original CSS reached 104%. Try using this:

#cff .cff-item {
    width: 21%;
    clear: none;
    padding: 0 2%;
    border: none !important;
}

Best regards.

• This reply was modified 4 years ago by Smash Balloon Joel.

Hi Joel.

I understand the math now. Sorry about that. Must calculate padding on both sides of each card. I have tried several variants in Facebook Feed > Customize > Misc > Custom CSS :

#cff .cff-item {
    width: 21%;
    clear: none;
    padding: 0 2%;
    border: none !important;
}

#cff .cff-item {
    width: 23%;
    clear: none;
    padding: 0 1%;
    border: none !important;
}

#cff .cff-item {
    width: 19%;
    clear: none;
    padding: 0 3%;
    border: none !important;
}

However, none were successful. In fact the site is completely unresponsive to this change. It still looks the same as when I initially toggled the columns setting to 4.

Additionally, when I try to change the feed height in Customize > General > Feed Height, the height doesn’t change, but the third and fourth posts stack on top of each other. Quite a mess.

I do appreciate your help. This is literally last piece of the site I am doing as a volunteer for a 501c3. They have a tiny operating budget (about $500 – $750/yr), so going pro is, unfortunately, not an option. I do appreciate your assistance very much.

Hey @ndar,

Changes not being applied is most likely due to caching on the website, either via the host, plugins or locally. I tested your example CSS snippets here and they all work. Make sure to clear any website and local cache, if you still are unable to get them working most themes have a Custom CSS field as well where you could try adding this.

Should you have further issues I am happy to take a closer look should you send us a support request on our website here, including the System Info from the Instagram Feed > Support tab. This should help looking into issues setting the height as well. In this case, please specify where you are setting the height of the feed.

Many thanks.