Themes and how do I reduce space between header and text?

  • Unknown's avatar
    nenen30 · Member ·

    I am very new to WordPress and currently using Expound theme. There is a large amount of space under my header before the text starts which means people will have to scroll down to see the content. I searched for answers in the forum and found some advice which said to inset the following into CSS: #main {padding-top: 0;}

    I tried doing this by opening CSS and inserting that instruction then saving but nothing changed. Am I doing something wrong?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    adamargyle · Member ·

    in this case, changing the id “#main” will not change the amount of space underneath the menu, as “#main” is the entire page under the menu. it appears that you may be able to reduce some of the spacing by changing the class “.site-content article” which has the setting “padding-top: 40px” – as the top and bottom are both set it turns into 80 pixels of space. removing that setting – or setting both “padding-top” and “padding-bottom” to lower numbers will decrease the empty space.

  • Unknown's avatar
    nenen30 · Member ·

    Thank you so much for your quick reply adamargyle. However, I am VERY new to this so would appreciate it if you could explain how I find the bit I need to change.

  • Unknown's avatar
    adamargyle · Member ·

    ah, that part is slightly harder. if you’re unfamiliar, you can create a new CSS block like so:
    .site-content article {
    padding-top: 0pm !important;
    }
    and add it in. this is easier than searching to find where in the CSS the block to change is – the !important tells it to override other code specific to the same tag/class.
    this is not the preferred way – ideally you would look through the CSS and try to adjust the single block, but when you can’t the !important tag will make it the last style applied and override any others.

  • Unknown's avatar
    adamargyle · Member ·

    ah, typo – it should be:
    padding-top: 0px !important;

  • Unknown's avatar
    nenen30 · Member ·

    Thank you for that Adamargyle. I’ve tried putting that code in but it doesn’t seem to make a lot of difference, if any. I think this stuff is way too complicated for me! I was hoping it would be more like using MS Publisher (which I am very familiar with) and I would just be able to drag and drop things around to where I wanted them. However, I really appreciate you trying to help me.

  • Unknown's avatar
    justpi · Member ·

    @adamargyle:
    “px” and “!important” are superfluous.

    @nenen30:
    a) You make changes by adding bits of code in the CSS editor; these bits of code add to or override the original CSS of the theme. And yes, it’s complicated at first; to find out what you need to target, you have to learn to use a developer extension (such as Web Inspector in Safari or Firebug in Firefox).
    b) The space under the header is due to three different elements, so adamargyle’s suggestion removes part of it only. To remove more of it, add this as well: 

    .entry-content {
    margin: 0;
}

    To decrease it even more, add this and decrease the value: 

    .site-content .entry-content h2 {
    margin-top: 40px;
}
  • The topic ‘Themes and how do I reduce space between header and text?’ is closed to new replies.