WordPress.com is an easy way to start blogging. Get a blog, check out our features, read the latest announcements, choose from great themes, or learn about the team behind it.
Need help? Check out our Support site, then
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.
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 {<br />
padding: 3.23em 0 0;<br />
}
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.
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!
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!
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 {<br />
margin: 1.615em auto;<br />
}
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 {<br />
margin: 1.615em auto 1.615em;<br />
}
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!
This topic has been closed to new replies.
sayparcheezie
