• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

How to get full width banner in News Pro solved

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to get full width banner in News Pro solved

This topic is: not resolved

Tagged: banner, header image, News Pro

  • This topic has 19 replies, 4 voices, and was last updated 9 years, 12 months ago by TheresaSh.
Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • April 4, 2015 at 11:20 am #146669
    CDM
    Member

    Hi.. this basically works. I found most of the instructions at http://wpsites.net/web-design/news-pro-full-container-width-header-image/

    but I still had too much space beneath the banner so I changed this line 1077 in the style.css

    The PHP Modifications
    1. //* Lines 41 & 42 Change height & width values
    2. add_theme_support( 'custom-header', array(
    3. 'header_image' => '',
    4. 'header-selector' => '.site-title a',
    5. 'header-text' => false,
    6. 'height' => 190,
    7. 'width' => 1170,
    8. ) );
    The CSS Modifications
    Modify the CSS declarations under the Site Header section of your child themes style.css file for these 4 classes.
    You’ll find these 4 classes between lines 997 and 1062.
    .site-header {
    background-color: #fff;
    }
    .site-header .wrap {
    }
    .title-area {
    width: 100%;
    }
    .header-image .site-title a {
    min-height: 190px;
    width: 100%;
    }
    But at line 1077 change the padding to get the banner to go right across the page

    From
    1077 padding 0 40px

    To

    1077 padding 0 0px

    http://hcvadvocate.org/wordpress/
    April 5, 2015 at 10:17 am #146740
    RightNerve
    Member

    CDM, THANK YOU SO MUCH!!! I literally have been fighting this for 6 days since I purchased News Pro last week.

    I notice that both your site and mine after your mods above, however, still have the too-much-white-space-between-title-and-menu on cell phones.

    Have you got any way to address that yet?

    Also, the banner shrinks to the cell phone size (yea!) when I look at your site in cell phone portrait mode, but when I turn the screen sideways (landscape), the banner doesn't resize and is too big. (Mine does this too, but again, I made your mods above.)

    Any suggestions there? Have you noticed that about your site on a cell phone? OR is it somehow a problem with my cell only?

    Thanks so much,

    Greg

    April 5, 2015 at 10:39 am #146742
    CDM
    Member

    Hi Greg.. Yup.. Those are the remaining problems! You got it.. So when you or someone else figgers them out.. post them. .. I'm slowly developing the site and as of now I do not know the answers... But.. this forum is a great place and you never know.. Someone might figger them out soon.. and it might be me..

    All the best and keep us posted

    CD

    April 5, 2015 at 10:51 am #146743
    RightNerve
    Member

    Your reply just now was helpful because knowing I'm not the only one seeing these issues means it's still a problem and not just me messing something up.

    But you got the foundation done here. Thanks!.

    I'm stunned StudioPress refuses to offer a full-size banner option THE WAY MOST WEBSITES HAVE HAD FOR 2 DECADES NOW. I realize they want all their sites to be scaleable to cell phone size, and of course that's a great goal, but they should trust us to have banners that are readable when the banners automatically shrink. To eliminate the full-size, scaleable banner option altogether just makes it SO frustrating for us to figure out how to force it, especially those of us who are not WordPress pros.

    I love StudioPress, but this issue seems excruciatingly limiting for us.

    Greg

    April 5, 2015 at 11:37 am #146747
    CDM
    Member

    Hi Greg.. Have you asked the support people at StudioPress? I will eventually; I'm just giving them a rest from all the bugging I've been doing. But they have been very quick to respond. Also this forum. It might be something simple in the css, or it may involve a php tweak. Php is beyond me. Css I can do at an intermediate level.

    CD

    April 5, 2015 at 11:47 am #146748
    RightNerve
    Member

    Yes and the amazing thing is I got a NO IT WOULDN'T BE DYNAMIC AND BE AS VISIBLE ON SMALL SCREENS- to which I think, isn't this something MOST PEOPLE WANT ANYWAY? Make it dynamic!

    If we create a banner that isn't readable when it shrinks on a cell phone, that's OUR problem, but give us the ability!

    I also pointed out a bug in the Lifestyle Pro theme (the first menu option does not automatically center when you create the sample theme, requiring a code fix) and the answer was, "Check the forums."

    Again... my 8 days or so with StudioPress have been a mixed blessing, mostly I LOVE the themes. But I'm unsure why they would be such sticklers on the banner/heading issue, and if I did point out a bug, agreeing it's a bug or telling me I was wrong (turns out I was right, it was) would be better than not owning up to it and sending me to the forums. The forums are great for things, but to verify a bug??? That's sort of on them.

    G

    April 8, 2015 at 11:21 am #147085
    CDM
    Member

    Mobile issue is now fixed.. Hello All: I contacted StudioPress support and they were great. They send me the following code changes (add/modify to what I put above) for the style.css Now there is no huge space below the banner on my phone. I haven't tested it on a tablet yet, so if any of you have a tablet and want to test it (or an iPad) please let me know!!!

    Here the code changes message from StudioPress Support:

    We usually suggest using the default logo size as this displays best on mobile devices.

    You will want to look for this code in your style.css file:

    .header-image .site-title a {
    background-position: center top !important;
    min-height: 190px;
    width: 100%;
    }

    and change to this:

    .header-image .site-title a {
    background-position: center top !important;
    background-size: contain !important;
    min-height: 190px;
    width: 100%;
    }

    You can try adding a new media query to the bottom of your style.css file after the last } bracket. This should help reduce the space and you may need to adjust this to have it display correctly. (make sure to include both closing }} brackets):


    @media
    only screen and (max-width: 480px) {

    .title-area {
    height: 80px;
    }
    }

    Here are a couple other resources with different options that may help in creating a full width responsive header:

    You could try this tutorial for adding multiple size headers to your theme: http://thepixelista.com/responsive-genesis-child-theme-logo/

    http://keypresswp.com/full-width-responsive-header-image-lifestyle-pro/

    You can also ask on the Community Forums, to see if another user has done something similar and can share the code: http://studiopress.community

    Please let us know if you have any other questions or problems – we'd be happy to help. You can open new tickets at http://my.studiopress.com/help/ . For CSS and theme customization help, check out our community forums at http://www.studiopress.community

    Regards,

    Corinne Olson
    Customer Success Specialist

    April 8, 2015 at 11:21 am #147086
    CDM
    Member

    Oh I forgot: here's the link to my site in progress:
    http://hcvadvocate.org/wordpress/

    April 8, 2015 at 11:56 am #147089
    RightNerve
    Member

    CDM, you are my HERO!!!!!!!!

    You got much farther with them than I did when I asked this. THANK YOU!!!

    Now we must decide if we want to do the multiple header/banner sizes or not. That makes some sense and might be a better approach but... in the meantime, YEA our sites work now!!!!!

    Greg

    April 8, 2015 at 12:15 pm #147091
    CDM
    Member

    Hi Ditto. I noticed that the alternate banner images at different sizes were automatically generated by Genesis.. I think this is in the functions php.

    Anyways: if you have an iPad could you please check my site and tell me if it's resizing?

    All the best

    CD

    April 8, 2015 at 1:01 pm #147094
    RightNerve
    Member

    I sure would, but I have no Apple product. Sorry, I wish I did, it would be extremely useful to know the answer.
    Greg

    April 25, 2015 at 1:27 am #149105
    twoaussietravellers
    Member

    Thanks so much for sharing, I gave up months ago in total frustration, will have another go this week now!

    April 25, 2015 at 2:05 am #149106
    twoaussietravellers
    Member

    Thanks so much for this, i've been trying to do this on and off for so long. Can I just check that the size I should be making my image to upload is 190x1700?

    April 25, 2015 at 12:02 pm #149158
    CDM
    Member

    Hi twoaussie... I think that 1700 is too wide. It is for our site. We are using 1138 x 190. So anyways... the code changes are all good, but I'm not sure about your width..

    CD

    May 28, 2015 at 10:02 pm #154043
    TheresaSh
    Member

    I'm having an extreme problem too!! Trying for about a month - this looks good!! I'll see if I can fix mine - I found videos, etc but none are trying to do what we are - I used 1138 but I still have the side padding and above and below with 1138 x 200 - top is fine but cutting out - still not responsive. I'm going to follow this thread from the top and see how it goes.

    TS

    May 28, 2015 at 10:43 pm #154045
    CDM
    Member

    one thing to remember is to leave the tag line in the header settings blank!! This is important. I found that when I left my tagline in the settings it pushed everything down and put in space..

    May 28, 2015 at 11:09 pm #154047
    TheresaSh
    Member

    Okay, Thanks it worked on the live site but the appearance of the header on a mobile device leaves alot to be desired!! Way small...using the feedback from the Helpdesk. I did one on Lifestyle Pro too and the header looks great on Chrome on my laptop but not on mobile device!! Way too big! Going to try the plan on http://wpsites.net/web-design/news-pro-full-container-width-header-image/ as he has a video showing responsive header? We shall see....

    May 28, 2015 at 11:31 pm #154049
    TheresaSh
    Member

    That worked removing the padding everywhere I could on the media screen sections. Alot better but not perfect. Will try that other one that does all sizes now. But I am getting close!!

    I will try taking out the header tagline!! Should not have to leave it out though but whatever - I don't think its going to be a serious SEO breach?

    Now the thread is closed. I feel sorry for people when the threads are closed and deemed resolved and other people on the forums dont get the benefit of everyone else's experience. I've seen that happen alot on here. People getting resolution and the thread being closed. Isn't a forum for everyone.?

    May 28, 2015 at 11:40 pm #154050
    TheresaSh
    Member

    Okay, now its showing as not resolved.

    Thanks CDM - it didn't make any difference on my iphone - funny if I put my iphone sideways it works great but if I put it up like normal it leaves the white space between the header and the menu- content and lots of space between the menu and the content.!! but its pretty good. If I get it down exactly I'll post again.

    May 28, 2015 at 11:54 pm #154052
    TheresaSh
    Member

    I went to the Pixelista site http://thepixelista.com/responsive-genesis-child-theme-logo/

    She gives a good link to try out your site at studiopress viaGitHub with all sizes so you can see where its not working. I haven't had time tonight to perfect it but my site looks ok on all the sizes - just not perfect.

    if you put your site in put a backslash at the end like this http://www.mydomain.com/

    Thanks everyone for all your expertise.

  • Author
    Posts
Viewing 20 posts - 1 through 20 (of 20 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble