Pinboard – Can't remove top/bottom Header padding

  • Resolved Laurensmitty

    (@laurensmitty)


    11 years, 7 months 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!

Viewing 11 replies - 1 through 11 (of 11 total)

  • 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!

    Thread Starter Laurensmitty

    (@laurensmitty)

    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. ??

    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.

    Thread Starter Laurensmitty

    (@laurensmitty)

    <<<—Neophyte

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

    https://www.we-exist.org

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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.

    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 ??

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try adding to your Custom CSS;

    body {
 border: 10px solid red;
}

    Anything happen?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Here’s the issue;

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

    Close your curly brace.

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

    Thread Starter Laurensmitty

    (@laurensmitty)

    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-

    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 ??

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Pinboard – Can't remove top/bottom Header padding’ is closed to new replies.