Fresh and Clean theme: Remove Space Above Header
I would like to remove the dark blue space above my tan header image so that the header image is flush with the top of the page.
The blog I need help with is woodfielddental.com.
You should be able to do that by changing #page to have margin: 0 auto;
Let me know if that wasn’t clear or didn’t work as you wanted it to.
unfortunately, i’m not sure how to do that. can you please explain? i’m a CSS novice. thanks!
Sure! The code controlling that blue margin above your header image looks like this:
margin: 1.563em auto 0;
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.)
To remove the blue margin at the top, just change the first value to 0. A simplified version of that code looks like this:
margin: 0 auto;
In this code, the first number controls both the top and bottom margins, while “auto” controls the side margins.
I 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!
P.S. In the future, you can post these kinds of questions directly in the CSS Customization forum. Most of the CSS experts hang out there, so posting in that forum should get your questions answered faster. :)
Wow, thank you so much for the help and pointing me in the right direction. I’ll definitely check out Firebug and the CSS forum. Appreciate it!
You’re very welcome! Glad I could help.
The topic ‘Fresh and Clean theme: Remove Space Above Header’ is closed to new replies.