Hi Justin,
The space is created by your themes css rules.
Specifically, it’s being generated on the <h1> tag.
You will want to use a custom css plugin (or theme option) to modify your css. This rule should do the trick:
.page-content h1 {
padding: 0;
}
Hello Josh
This will probably make you laugh, but where would I insert the rule you mentioned.
Regards WordPress newbee
What custom css plugin would you recommend?
Hello Greg
I installed the plugin you recommended thanks. After installation I added the CSS rule to the plugin that Josh mentioned with no success.
As mentioned I am very green in the world of wordpress. From this point I highlighted the header title and right clicked Inspection Element Q to identify the exact header name effected by the blank space between the header and paragraph, the result was <h4></4>. I am assuming from here, I just need to get the correct rule for the CSS editor. Any help in doing this would be appreciated.
Website
http://www.uniqueprojectsolutions.com.au
Regards JB
I think its more complicated than that. Some of the space is the bottom-margin to the h4 which you can deal with using:
.page-content h4 {margin-bottom:0}
and some of the space is due to the bottom margin of extraneous p tags from baggage in the markup, probably because you have pasted text direct from MS Word. Some editors strip out the redundant MS Word stuff, otherwise you would get cleaner markup by pasting your MS Word text into a plain text editor and then copy and paste into the WordPress editor. The MS Word markup can be removed using the Text tab in the editor, providing you are able to identify what supposed to be there and what’s redundant. Also, it looks like there is a lot of it.
Hello Lorro
Thanks for the .page-content h4 {margin-bottom:0}, Originally I did past into word-press from from MS Word. I will do some research into the other P tag issues you raised, so I can identify whats supposed to be their, as I am rather green in the code department.
Regards JB
When you are in the page editor, choose the text tab, and look for the sections beginning with </o:OfficeDocumentSettings> and <w:WordDocument>
Delete all of the section between and including <p> … </p>. Back up the first one before you do it!
Hello Lorro
I have pasted in the code from the management page tab from my website. Could you highlight the text that need to be removed as indicated in your previous email. You mentioned their was extra code added when pasting from MS word. I am assuming the same code would then just need to be removed from the other webpage tabs.
Thanks JB
Code from Management tab on website http://www.uniqueprojectsolutions.com.au
[Code snipped by moderator; please use Pastebin for blocks of code over 10 lines, and include the link to the pastebin on this thread.]
Hello Lorro
I have pasted in the code from the management page tab from my website. Could you highlight the text that need to be removed as indicated in your previous email. You mentioned their was extra code added when pasting from MS word. I am assuming the same code would then just need to be removed from the other webpage tabs.
Thanks JB
Code from Management tab on website http://www.uniqueprojectsolutions.com.au
[Code snipped by moderator; please use Pastebin for blocks of code over 10 lines, and include the link to the pastebin on this thread.]
Responded via email with redundant code marked.
Thanks for the info Lorro it is appreciated. You were not joking when you said there was alot of MS code to be removed, it certainly shorted things up. My plan moving forward is to get things 100% right on one web page and then apply the same principles learned across others pages.
What I would like to achieve next on the management webpage.
1/ Establish a standardized font within the CSS plugin e.g font type, size, color and spacing between text for paragraphs, using the ‘ITC Avant Garde Gothic’,’sans-serif’,font, (Unsure of the code required for the CSS plugin?)
2/ Remove the space between the Title (in Red) e.g Management and the image below, and apply a code to control the margin spacing so I can play around to get the spacing right, I am not sure if I am using the correct terminology?
3/ Establish a standardized font within the CSS plugin e.g font type, size, color and spacing between text for HEADERS TYPES e.g in this case H4 for the CSS plugin?
4/ Be able to control the space between the paragraph above and the next HEADER below?
5/ Identify what is the most widely used font on websites?
Website http://www.uniqueprojectsolutions.com.au
1/ The font and other settings are inherited from the theme style sheet, so no need to set them in the css plugin.
2/ This space comes in part from the top margin of the h4:
h4 {margin-top:0}
and in part from the top margin of the image:
.page-content img {margin:top:0}
3/ As 1/, font type, size, colour and spacing are inherited from the theme style sheet. This ensures consistency throughout a site.
4/ That space is the bottom margin of the p tag, so
p {margin-bottom:0}
5/ There are lots of fonts in use and no clear winner. Most themes will have a good font definition which provides a fall back if the user’s browser is unable to render the page in the preferred font.
Too many tweaks can have unwanted side effects elsewhere and impose a liability to keep it all up-to-date. It maybe best to leave it as the theme designer intended, or look at some other themes.
Hello Lorro
Thanks again for all your help, check this site out http://www.w3schools.com
