Support » Themes and Templates » How to remove white space above header and below footer?

  • Resolved RVDA55

    (@rvda55)


    Hi,

    I’ve been scouring the internet for hours now but no one seems to be able to answer the question..;

    How do I remove the standard white space above the header and below the footer of my Twenty Twelve theme?

    I noticed the gaps are 48px high. But searching the style.css for ’48’ and changing it to 0 does nothing at all. What is going on and how do I change it? Also I would expect there to be something like ‘margin-top 48px’ but nothing to be seen anywhere… do I need to edit another file to make this work?

    I just want to remove this ridiculous amount of whitespace (how did that help ANYONE), thanks in advance.

Viewing 15 replies - 1 through 15 (of 27 total)
  • Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Did you come across suggestions like, “Use firebug”?
    Or comments that say, “Do you have a Custom CSS plugin or a Child Theme”?

    Yes, I have Firebug and couldn’t find anything. I hardly know how to operate it anyway.

    I don’t have a custom CSS plugin or child theme.

    So if anyone can just tell me what I need to do to get it to work thanks in advance.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Download (and install) a Custom CSS Manager plugin.

    Then add this in the section of the dashboard allocated by that plugin;

    .site-header {
     padding-top: 0;
    }
    
    footer[role="contentinfo"] {
     padding-bottom: 0;
    }

    If that still didn’t resolve the issue, you’ll need to link your website.

    Hi Andrew,

    what do you mean by ‘allocated by that plugin’? Do I need to go to the dashboard and then what?

    I know only a tiny bit of css.

    Thanks

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Have you installed the Custom CSS Manager plugin?

    Yes, and it’s active. If I need to paste that code into the custom css box (under that plugin’s settings) I have done so. I refreshed my site but nothing changes.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    You’ll need to link your website.

    I deactivated the header and navigation because I want to make a squeeze page out of it.

    Link

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    The header’s styles are still present.

    Instead of this code;

    .site-header {
     padding-top: 0;
    }
    
    footer[role="contentinfo"] {
     padding-bottom: 0;
    }

    Try this;

    .site-header {
     display: none;
    } 
    
    footer[role="contentinfo"] {
     padding-bottom: 0;
    }

    Any styles you make to the theme’s files will erase when the theme updates

    Thanks for the help, but the margins around the body are unchanged and still there.. any other suggestions?

    I tried clearing the temporary files etc. but doesn’t do anything regarding the white space.

    The second code you provided did remove the header btw.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Try adding this;

    #page {
     padding: 0;
    }
    
    #primary {
     margin: 0;
    }

    That seems to remove the horizontal margins between the body border and the content..

    I’m surprised how hard this is to fix. I just want the body to touch the borders of my browser.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    The difficulty is communicating correctly between us.
    Add the code prior to this post. Don’t replace previous code, append to it.

    Thanks for your help, but that second code doesn’t do what I want. Or is there more coming?

    I put both codes in.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    What are you referring to as the body?

Viewing 15 replies - 1 through 15 (of 27 total)
  • The topic ‘How to remove white space above header and below footer?’ is closed to new replies.