WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Pinboard - Can't remove top/bottom Header padding (12 posts)

  1. Laurensmitty
    Member
    Posted 1 year ago #

    Hello Everyone,

    After a week of reading other posts on this issue, I'm finally at the point where I need to ask for help. Like many others, I was trying to remove the padding around the header. By using mouseclick's tutorial, I was able to remove the padding on the left and the right but it still left padding on the top and bottom.

    Here is a screenshot - you can see the light gray padding above and below the header image.

    Below is the code from mouseclick's tutorial that I put in the custom css

    #site-title {
    margin:0;
    line-height:0;
    float:left;
    }
    
    #social-media-icons {
    display:none;
    float:none;
    margin-top:0;
    }
    
    #header input#s {
    display: none;
    }
    
    #header #searchform {
    float:none;
    }
    
    #site-title,
    #site-description {
    	margin:0;
    	font-weight:300;
    	float:left;
    	line-height:0px;
    
    #site-title img {
    margin: 0;
    }

    My image is at 1145px width. I have also tried uploading smaller and larger images with mixes of crop/don't crop.

    Any help you can give me will be so appreciated!

  2. zvitez
    Member
    Posted 1 year ago #

    Hi Lauren, do you know about the !important declaration?
    "The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document."
    Maybe adding it to your margin declarations could help.
    To add just place at the end, like so
    #site-description{
    margin:0 !important;
    }

    Good luck!

  3. Laurensmitty
    Member
    Posted 1 year ago #

    Zvitez,

    Thanks for your help. I pasted the following at the very end of the code posted above but it sadly has not removed the padding. Did I insert it incorrectly perhaps?

    #site-description{
    margin:0 !important;
    }

    Thanks for the !important tip - I had no idea what that meant. :)

  4. zvitez
    Member
    Posted 1 year ago #

    No problem :)
    Hm, well what I'd try next is figure out if it's actually site-description that's causing the margin or if it's another element. If you could provide the link to your site I could check. Otherwise you could also try yourself by using a tool like Firebug or the inspect tool in chrome.

  5. Laurensmitty
    Member
    Posted 1 year ago #

    <<<---Neophyte

    Oops, yeah I forgot to post the site link earlier. I'm not sure what Firebug is - does it require coding?

    http://www.we-exist.org

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    Laurensmitty, Firebug is a tool to debug HTML, CSS and JavaScript issues.
    I used the Google Chrome equivalent and immediately found the culprit CSS [screenshot] (orange represents margin).

    Try adding this;

    #site-title img {
     margin: 0;
    }

    You can also try to avoid using !important wherever possible because you can cause a chain reaction of using !important to override everything. Most styles can simply be overridden using more specific selectors.

  7. zvitez
    Member
    Posted 1 year ago #

    If you're using chrome right click on an element on the page and select Inspect Element to open the little window Andrew shows in the screenshot. It's a really handy tool.

    #site-title img {
    margin: 0;
    }
    should fix it, but it seems you already have that in your custom css. Try adding !important to that margin: 0 for test purposes. Not sure if you can use a more specific selector in that case. Maybe Andrew knows a way :)

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    Try adding to your Custom CSS;

    body {
     border: 10px solid red;
    }

    Anything happen?

  9. Andrew
    Forum Moderator
    Posted 1 year ago #

    Here's the issue;

    #site-title,
    #site-description {
    	margin:0;
    	font-weight:300;
    	float:left;
    	line-height:0px;

    Close your curly brace.

  10. Nisarg Patel
    Member
    Posted 1 year ago #

    #site-title img {
    margin: 0 0;
    vertical-align: middle;
    }

  11. Laurensmitty
    Member
    Posted 1 year ago #

    Aha! That sneaky un-closed curly brace was the culprit. A huge thank you to all of you for looking into this with me.

    I'm new to wordpress and the community/support has been stellar.

    Cheers-

  12. zvitez
    Member
    Posted 1 year ago #

    It's good practice to always open and immediately close the braces before even adding anything inside to avoid that. Using a good editor that indents CSS correctly could've also showed you that annoying/sneaky! mistake :)

Topic Closed

This topic has been closed to new replies.

About this Topic