Outreach – how to remove the white space in header?

Community Forums Forums Design Tips and Tricks Outreach – how to remove the white space in header?

This topic is: not resolved

Tagged: 

This topic contains 8 replies, has 2 voices, and was last updated by  blissedchic 1 year, 8 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #34152

    blissedchic
    Participant
    Post count: 5

    Hi All,

    I’ve been searching here for an answer but no luck…how do I remove the white space at the very right of the header in the Outreach theme?

    Thanks,

    Marina

    #34171

    susanlangenes
    Participant
    Post count: 28

    Marina, I don’t see any white space at the right of the header in the Outreach theme demo here: http://demo.studiopress.com/outreach/

    Can you give us a link to the site you are working on?

    #34172

    blissedchic
    Participant
    Post count: 5
    #34178

    susanlangenes
    Participant
    Post count: 28

    That’s odd.  Your html output for the page shows

    #header {

    background: url(http://www.firststepsfitness.ca/wp-content/themes/outreach/images/header.png) no-repeat;

    }

    Which shouldn’t be there.  Have you uploaded a custom header somehow, or do you have a plugin or something that allows you to change the header image and/or text?
    How did you get the site title to be purple?

    #34179

    blissedchic
    Participant
    Post count: 5

    No I haven’t uploaded a custom header. This is a common issue apparently – I found this out when I did a search in the forum but no solution was provided. People eventually figured out how to fix the issue but they didn’t post how they did it.

    I changed the color of the header text: Appearance/Header

    #34181

    susanlangenes
    Participant
    Post count: 28

    Ok.  this is a little bit hacky, but try it and see if it works.  Add all this to either a custom stylesheet or to the bottom of the theme’s stylesheet:

    #header {
    margin: 0 auto!important;
    min-height: 100px!important;
    width: 100%!important;
    background-repeat: repeat-y!important;
    background-position: center!important;
    overflow: hidden!important;
    background-size: cover!important;
    }
    It’s really overkill but I’m hoping it’ll work…

    #34183

    blissedchic
    Participant
    Post count: 5

    OMG, it worked!!!  Thank you so much…I’ve spent a couple of hours already trying to figure it out. Thanks!!

    #34187

    susanlangenes
    Participant
    Post count: 28

    Yay!  It’s really the last declaration there that matters (background-size:cover;) so if you ever want to change anything about the header image in the future, just make sure that one stays.  The others are all just declarations that were already applied (or, supposed to be applied) so I simply copied them just in case.

    :)

    #34190

    blissedchic
    Participant
    Post count: 5

    Thanks. That’s really helpful.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.