Reducing white space behind header

  • Author
    Posts
  • #1117047

    Hi,

    I was wondering if there’s something I could do to reduce some of the extra white space behind my header in using the Forever theme. I have the CSS upgrade.

    I could make my header image wider, but I’d prefer to keep the overall header shorter and make it more flush with the white background. If there’s some way to adjust the height of the area behind the header, that’d be great.

    My site is helainecheongdds.wordpress.com

    Thanks!

    The blog I need help with is helainecheongdds.wordpress.com.

    #1117166

    rachelmcr
    Staff

    Do you want to change the amount of white space above the header image only or also on the sides? The amount of white space above the header image is controlled by this padding code:

    #masthead {
    padding: 3.23em 0 0;
    }

    If you want to reduce the white space above the header image, just decrease the current value (3.23em) and use that piece of CSS in your custom stylesheet.

    #1117167

    rachelmcr
    Staff

    By the way, I highly recommend using Firebug (in Firefox) to help identify what code you need to change to make these kinds of design adjustments. It’s a very helpful tool!

    #1117191

    Hi,

    Thanks! That additional code helped. I’d like to also decrease the white space below the header image. Is that possible as well?

    Sorry but I’m a n00b coder and don’t know much about CSS at all!

    #1117207

    rachelmcr
    Staff

    Yes, it’s definitely possible. It looks like most of that white space is the margin around the navigation menu, so you will want to adjust this piece of code:

    #access {
    margin: 1.615em auto;
    }

    The way it is written, the first number controls the margins above and below the menu, while the “auto” value controls the side margins. If you only want to change the white space above the menu without changing the space below it, use this code:

    #access {
    margin: 1.615em auto 1.615em;
    }

    The first value is the top margin, the second is the side margins, and the third is the bottom margin. (You can read more about how this works in this W3Schools CSS Margin article.)

    I really encourage you to look over the CSS Basics page to get a better sense of how CSS works. It will help you learn to explore this code and feel more confident working with it.

    The Firebug add-on for Firefox is my favorite CSS tool, because you can right-click on any element on your website and inspect the code behind it. You can also test out changes to the code and see the results on the screen without changing how anyone else views your website. I find that very helpful!

The topic ‘Reducing white space behind header’ is closed to new replies.