Add Space Between Posts

Try the following CSS:

.notable-post > div {
margin-bottom: 50px;
}

Increase or decrease the px value of margin-bottom as you wish.

Hope that works for you! Let me know.

Thanks Siobhan, but that doesn’t seem to work. I have tried adding various “margin-bottom” coding to different .notable-post areas and nothing seems to have an effect. Could there be coding elsewhere that is overriding me adding an extra space after each post?

Where are you adding this CSS?

You should be adding it via a child theme’s style.css file or a Custom CSS plugin. Any CSS that you include via either of these two methods should be called after the theme’s main style.css file, so other code overriding it shouldn’t be an issue. :s

Okay, thanks. I have been editing the main style.css file – how can I go about making a child theme at this point, or using a Custom CSS plugin to solve the problem? Both of those methods are more advanced than I’ve previously handled.

Adding a Custom CSS plugin may be the simplest solution for you and what you wish to do at this moment.

In your dashboard, go to Plugins->Add New. Search for “Custom CSS.” You’ll see a resulting list of Custom CSS plugins. Choose one of these, install, and activate.

I would recommend choosing “Simple Custom CSS.” If you do choose this plugin, you can access it through Appearance->Custom CSS.

Add the code that I originally gave above in the editor for your newly activated plugin, and, fingers crossed, it should work.

Thanks again. I followed these steps and it had no effect. For good measure, I even reverted style.css to its original code from the WPFolio theme, then added the Simple CSS code you gave me, and still it didn’t work. Have you ever seen this happen before?

It’s really strange, I downloaded this theme to my test site and didn’t seem to have the same issue as you. I’m unsure what went wrong sorry. The only thing I can think of is that there may be a plugin conflicting with your theme in some way. :s

I see you’ve changed your theme to 2012 now. Are you happy with this change?

Thanks again. I followed these steps and it had no effect.

Followed which steps, did you manage to get a custom CSS plugin?

I switched to 2012 to test some coding tweaks, now back to WP Folio.

Andrew – I tried the CSS plugin Simple CSS.

Hi. I can’t see any reference to the CSS I gave in your source code at the moment, could you try it again so I could see why it’s not working? Thanks.

Sorry, I had removed the code and was just adding manual breaks with ‘s in each post. I just put your suggested code back in (via Simple CSS plugin), so feel free to check it out.

Thanks for taking the time on this!

Ok, I just viewed your source code and could see the CSS you input got interpreted as:

.notable-post > div{
margin-bottom: 50px;
}

Sometimes, if you copy and paste characters like this from the web, the HTML for that character will be copied. This is probably why > has changed to its HTML character &gt. Can you go back, delete the > that’s there and manually input the greater arrows > from your keyboard into the Simple CSS input box. Then test to see if it works. Thanks!

Okay, just did this. Does it look alright now?

It’s still showing up as &gt. Argh, must be a fault in the plugin, sorry. Let’s try a different approach:

.sketches-scribbles, .uncategorized, .painting {
margin-bottom: 50px;
};

Awesome, that looks like it worked! How can I get that to apply to all posts?