Fresh and Clean theme: Remove Space Above Header

  • Author
    Posts
  • #1114329

    petedensmore
    Member

    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.

    #1114412

    rachelmcr
    Staff

    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.

    #1114452

    petedensmore
    Member

    unfortunately, i’m not sure how to do that. can you please explain? i’m a CSS novice. thanks!

    #1114460

    rachelmcr
    Staff

    Sure! The code controlling that blue margin above your header image looks like this:

    #page {
    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:

    #page {
    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!

    #1114462

    rachelmcr
    Staff

    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. :)

    #1114469

    petedensmore
    Member

    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!

    #1114470

    rachelmcr
    Staff

    You’re very welcome! Glad I could help.

The topic ‘Fresh and Clean theme: Remove Space Above Header’ is closed to new replies.