The theme uses this:
p {
margin: 1.25rem 0;
}
The 1.25rem = 20px, so you won’t see it change. You will want to increase that, but you won’t (or should not) need the !important added.
For reference of rem (and em) to px, you can use this online source:
http://www.pxtoem.com
I’m trying this on different browsers to make sure it’s not a caching issue, but still nothing is budging. The latest in the CSS is
p {
margin-top: 2rem;
margin-right: 0;
margin-bottom: 3rem !important;
margin-left: 0;
}
I am using what would be extreme numbers just to determine if I am having any effect. Any thoughts on what might be blocking the changes?
How are you adding the custom CSS?
I just tried this in my test site and it worked…
p {
margin-bottom: 3rem;
}
I am putting it in Appearance > Edit CSS, from the WordPress install, not a plugin. Is there a better way?
It sounds like you are editing the actual theme’s style.css file (stylesheet) which is actually not a good idea because when there is an update, you will lose your custom changes. If you are using Jetpack, then you can use its Edit CSS feature, otherwise if you’re not using Jetpack, try out a plugin called Simple Custom CSS.
This will create a new stylesheet and when the site pages load, this one comes after the theme’s own stylesheet.
Long technical story short, CSS is cascading. So lets say you do this:
p {
margin-bottom: 3rem;
}
but you paste that before the theme’s own:
p {
margin-bottom: 1.25rem;
}
The theme’s version will override yours because it comes after it, which is probably why you don’t see any change.
But try out the Simple Custom CSS plugin and then move your custom CSS changes into that.
I’m not editing the theme’s stylesheet and am familiar with the cascade. However, with the Edit CSS in the sidebar I’m not at all sure whether it loads before or after. I am familiar with the plugin and have used the plugin before when the Edit feature has been absent. I’ll switch to it and keep my fingers crossed.
I moved the styles over to the plugin and switched to a different computer, thus a different browser. The paragraphs still aren’t budging, even with !important.
The current code—
p {
margin-top: 2rem;
margin-right: 0;
margin-bottom: 3rem !important;
margin-left: 0;
}
Any other suggestions?
I’m not sure what to suggest because I cannot replicate the issue. I was able to do the change without problems. I’m wondering if you have a plugin that is overriding the paragraph selector and styling…
I’d be able to find out if your site was live because I can then look at the code, so we may have to wait for your site to go live first.
It is still a work in progress, but I’ve moved the theme over to the public site. You can view it here.
Got it!
Your pages show <br> tags instead of <p> tags, for example, I looked at your About page and blog posts. You have one large paragraph with your content and several <br> tags where they should be separate paragraphs. This is why you are not seeing the spacing. At the end of each paragraph that you do have, the custom CSS is working.
I’m thinking your editor is setup that each time you press the “Enter” key is doing breaks instead of paragraphs, or did you copy your content from an external source?
I usually wash everything she gives me through a text editor which strips all of the extras out. In this case it sounds like I may have missed that step on some of the key pages. I’m not catching it on my end because the WordPress editor is apparently stripping out all of the tags from vision, but not from function. I didn’t realize it could do that.
I’m going to redo all of the pages where this matters to see if this can be put to rest. Thanks for playing detective!
The WP editor is notorious for stripping things out and in my opinion, the default editor is the worse. Anyway, one thing you might want to consider is using an editor that has settings, one that won’t strip out or hide tags like <p> if you were to view it in the text tab. I use two in conjunction with each other…TinyMCE Advanced and then to show the html code, I use HTML Editor Syntax Highlighter.
Thanks for letting me access to your site as well, because that helped find the problem.
Problem solved. I think I need a vacation and a new text editor! The HTML Editor Syntax Highlighter looks like it will be great for setup. I’m not sure if I’d leave it activated for my clients though. They are pretty tech phobic!
thanks again
No worries… what is important is that the problem is solved 🙂
