Spacing between Entry Title and Entry Content
-
Hi there,
I am trying to move my post content closer to the entry title. I’ve tried the margins and padding of different elements, but I can’t quite get it right. Can anyone tell me what to change? Thanks!
The blog I need help with is: (visible only to logged in users)
-
This is tricky as you have three different examples on your homepage right now. The first has a plain h2 element which has a large top margin. The second has a blank paragraph in the post content causing the larger space and the third has an h2 but this one has the class “subheader” which has the margins removed.
There is not top margin on p paragraph elements so if you start a post with those you should be fine. You could try removing the top margins on the other header elements and see if that helps:
h1, h2, h3, h4, h5, h6 { margin-top:5px; } -
Yeah, I was trying to play with the HTML (“subheader”) to create a subtitle for the post, but it’s creating more problems than it’s solving. Ideally I want it to look like the third, but I can’t figure out a way to do that without messing up the posts with a subtitle.
-
If you use the code I just provided you can reduce the top margin on headers in your posts. Give it a go!
-
Hrm, I tried, but it didn’t change anything. Is there an easier way to create subtitles for my posts?
-
You aren’t seeing any change because your existing posts have the “subheader” class still applied. If you remove this from your posts the CSS should do the work so you don’t have to do anything extra.
As I mentioned before you have a couple of posts that have a blank p tag (view your posts in the text editor to see what I mean) which is causing the extra space in these instances. Delete that element and it should remove the spacing.
-
Sure, but now I’m back to my original problem: subtitles that are too far below the entry title.
-
OK, now you can try this:
.entry-header { margin-bottom:5px; } h1, h2, h3, h4, h5, h6 { margin-top:5px; } -
Close, but not quite. The body text is now too close to the titles and the subtitles too far away. This is tricky.
-
You can change the values from 5px, that’s just an example. You can use any values you want. Try increasing the first value and reducing the second.
-
The problem is that the h1-h6 code only fixes the posts with headings. The entry header affects all the posts, so when I raise the entry header margins to increase the space between a title and the content, it pushes the headings down with it. I put an entry-header margin of 20 and a h1-h6 margin of 0 to show the problem.
-
That looks like it fixes the problem to me, the spacing is now almost exactly the same whether you have a heading or not. I don’t think I’ve fully understood how you want it to end up looking. Could you try to explain thoroughly?
-
I think the posts without headings look OK (I’d prefer for them to have more space between the title and the content, but I won’t be too picky considering my limited CSS skills), but I want the headings to be just under the title. To get that spacing though it puts the content without headings right under the title. I changed the CSS to show. The posts with headings look right, but not the ones without them. I apologize if I’m being confusing.
-
That’s OK, I think we’re getting somewhere slowly but surely.
Seeing as you have the posts that start with headings looking how you want let’s try to fix the other situation. This code will let you increase the spacing for posts on your home page and archive pages where the first element is a p paragraph element.
.blog .entry-content p:first-child, .archive .entrey-content p:first-child { margin-top:15px; }Any better?
-
-
Finally =)
If anything else crops up (which it might do if you start one of your posts with a list or a quote instead of a paragraph or header) then let me know!
-
Hey, Luke! I have a new related question for you for this blog. Do you know how to reduce the spacing between the second and third line (The Truth About… and Salesforce Ecosystem) so that it is the same spacing between the first and second lines (Live and Die… and The Truth About…)? Let me know.
-
Hi, to prevent affecting all h2 headings in the site (where you many not want the reduced line-height), I would suggest changing this in the HTML for the post. Open that post in the editor, switch to the text tab and make the opening h2 HTML tag look like this and then adjust the 1.2 value as desired.
<h2 style="line-height: 1.2;">
- The topic ‘Spacing between Entry Title and Entry Content’ is closed to new replies.
WordPress.com Forums 