WordPress.org

Support

Support » Themes and Templates » [Resolved] Spacing on Header and Footer

[Resolved] Spacing on Header and Footer

  • Here’s my website: websterlightgrant.com

    I’m having trouble getting rid of the white space above my header and the white space below the MetaSlider.

    I’ve been editing the spacing and padding however Everytime I update the edit the change doesn’t apply.

    Could use some guidance, thank you!!

    -Jeff

Viewing 15 replies - 1 through 15 (of 16 total)
  • be.creative
    Member

    @becreative-1

    Jeff-

    are you using firebug?

    Hi Jeff,

    for header, find to this line and delete the line padding, just delete the line padding

    header#masthead { padding: 25px 35px; }

    for Meta slider, do the same, just delete the line padding

    #main { padding: 35px; }

    Good luck!

    WPyogi
    Forum Moderator

    @wpyogi

    @namle – please do not advise people to modify theme files – those changes will be lost when the theme is updated. Changes should be made using a Child Theme or custom CSS.

    @wpyogi – thank you so much for you advice. I’m sorry for my knowledge

    A similar question… how would you remove the padding that seems to be automatically added to the custom logo?

    I just inserted a logo which I trimmed (no padding) and I would like to control the top & bottom padding. http://friedmanpictures.com

    Thanks,
    Tommy

    brshcollective
    Member

    @brshcollective

    I want to know the same thing Tommy, have found other posts about heading spacing and padding etc but none relating specifically how to do this in Vantage Theme. I hope someone out there has an answer.

    Thanks

    Saul

    WPyogi
    Forum Moderator

    @wpyogi

    That’s a margin set here – try adding this to a custom CSS option or plugin:

    header#masthead hgroup {
        margin: 0;
    }

    Do NOT modify theme files directly or your changes will be lost when the theme is updated.

    brshcollective
    Member

    @brshcollective

    Thanks for your help, unfortunately this didn’t seem to make any difference.

    here’s the site http://brshcollective.com/ you can see the white all around the logo image in the header.

    WPyogi
    Forum Moderator

    @wpyogi

    I don’t see that CSS code on your site – where did you add it?

    WPyogi
    Forum Moderator

    @wpyogi

    You may also want to add:

    header#masthead {
        padding: 0;
    }

    header#masthead hgroup {
    margin: 0;
    }

    Worked halfway when I put it into the custom CSS plug-in called “My Custom CSS”. Now the logo is aligned with the first menu button below it, with no padding on bottom. Looks like there is still padding on top.

    adding

    header#masthead {
    padding: 0;
    }

    Removes all 4 margins from logo, but also removes padding underneath the menu buttons. Changing the value of padding to the second code from zero to any number does the same thing, which makes an effect like the code was never there.

    I will leave my site with both codes on so you can see the final effect. Would be nice to be able to add /some/ padding — http://friedmanpictures.com

    WPyogi
    Forum Moderator

    @wpyogi

    Okay, try changing this one to:

    header#masthead {
        padding: 10px 0 20px 0;
    }

    You can adjust those if you prefer.

    brshcollective
    Member

    @brshcollective

    Hey guys thanks for your help. Really useful. It’s a shame that the menu is also effected in the header masthead, else this would be the perfect solution. Is there a way to request /suggest this for a future update?

    Thanks

    Theme Author Greg Priday
    Participant

    @gpriday

    I updated the code for the header slightly in version 1.1. The main aim was to make it easier to make it easier to change the spacing.

    You can change the header spacing using the following custom CSS.

    header#masthead hgroup {
      padding-top: 30px;
      padding-bottom: 30px;
    }

    Obviously you can set the padding to what ever you want. Version 1.1 should be available as an auto update but you can do a manual update too if you’d like. Just download the latest version from SiteOrigin.

    http://siteorigin.com/theme/vantage/

    Updating a Theme Using a ZIP File

    Hi Greg,

    Thanks for making a nice theme. I’m looking forward to customizing until the point it’s perfect, then purchasing the full version.

    However, your solution does not work for me. WPYogi’s solution does, with a slight modification to the second value in the #masthead padding section. For anyone looking to remove all padding/margins from the header, add both these lines of custom CSS to a custom CSS plug-in:

    header#masthead hgroup {
    margin: 0;
    }
    header#masthead {
        padding: 10px 1 20px 0;
    }

    Change the 1 to a 0 for absolutely no padding/margins. I put it as a 1 so that there’s a bit of space on the left side of the screen. See here: http://friedmanpictures.com

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘[Resolved] Spacing on Header and Footer’ is closed to new replies.