Hi Clive,
That space is being created by a bottom margin of 27px on the page title, so we need to reduce that:
.type-page h1.entry-title {
margin-bottom: 15px;
}
You can adjust the value to look the way you want.
This code will only affect titles on static pages. If you want it to affect post/page titles across the board, simply removing .type-page should do the trick.
Thank you for replying, unfortunately I cannot get the css code to have any effect on the title blocks, I have tried removing .type-page and changing the px value also and still nothing. I’m not sure if its me doing something wrong here but I don’t think so. . .
Hmm, try this instead:
.page .entry-title {
margin: 0 0 0px;
}
And just adjust that last number to your liking.
Let us know if that does the trick.
Thank you, but sadly still no effect . . . I am adding the code in “Additional CSS” is that the correct place?
That is the correct place to add it, yes.
The code works fine for me on a test site, so if it’s not working on your site there must be something overriding it.
You can check if it starts working if you disable all plugins on your site. Then re-enable the plugins one at a time until the CSS stops working to determine which one is causing the issue.
Well I have tried disabling the plugins in fact in the end I disabled all of them so at one point I had no plugins activated at all, but the title block and its spacing does not change whatever I do.
Here’s what I see on your index.php with the additional CSS:
@media screen and (max-width: 50em) {
.site {
margin: 0;
.page .entry-title {
margin: 0 0 2px;
}
That isn’t formed correctly. I’m not sure what you had going on before this, but its brackets aren’t closed properly, so your CSS isn’t being applied properly. Maybe replace all of that with this:
@media screen and (max-width: 50em) {
.site {
margin: 0;
} /* closes the .site style */
} /* this closes that @media query */
/* now for the CSS we recommended */
.page .entry-title {
margin: 0 0 2px;
}
Thank you, I’ve corrected the CSS, or at least I think I have. No change at the moment to the title block but I have yet to go through and disable the plugins which I will do asap and report back 🙂 Thanks for all your help with this.
Well a rather interesting development today… disabling the plugins made no difference, no change to the title block spacing at all even with the corrected code. Sometime later I happened to look at the site on my tablet and found all the titles were closer to the text in portrait view, but not so in landscape view. On my mobile the headings were closer to the text in both portrait and landscape view. Still no change on the desktop version (Windows 10). I am not quite sure what all this means if anything! 🙁
For whatever reason, this is still what I’m seeing:
@media screen and (max-width: 50em) {
.site {
margin: 0;
}
.page .entry-title {
margin: 0 0 6px;
}
That first line is limiting your changes only to smaller screens.
Thank you, that’s it! . . . I’m really not sure where that first line of code has come from but yes removing it has finally fixed it. Coming from a print background I know I am a little OCD regarding type and spacing, so it is very satisfying to finally have it looking right. Thank you to everybody here who has helped, this really is a great community especially for a Wordprees newbie like myself 🙂
Ah, we’re glad that did the trick. Cheers!
