• 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

Getting Custom Title Image to be Responsive

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 › Getting Custom Title Image to be Responsive

This topic is: not resolved

Tagged: Agency Theme, css, custom title, responsive

  • This topic has 3 replies, 3 voices, and was last updated 11 years, 9 months ago by worldviewpr.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • September 9, 2013 at 12:59 pm #61559
    worldviewpr
    Member

    In Genesis 2.0/Agency, I changed title to include instead a custom image in the title area, using the instructions found atI have followed the suggestions at

    http://blackhillswebworks.com/2013/05/10/how-to-replace-the-studiopress-background-header-image-with-a-real-image-logo/#comment-18650

    I assume the addition of the functio.php snippets I added are correct. But, althoug the logo image is in the right place on monitor, the logo image is still flush left in responsinator. How can I get it to be rendered responsively and appear centered on mobile devices like the plain <Title>?


    /* Header
    ------------------------------------------------------------ */

    #header {
    background-position: top center !important;
    background-color: #111;
    /* min-height: 120px; */
    overflow: hidden;
    width: 100%;
    }

    #title-area {
    float: left;
    min-height: 100px;
    overflow: hidden;
    padding: 15px 0 0;
    width: 350px;
    margin: 10px 0;
    }

    #title {
    font-family: 'PT Sans', sans-serif;
    font-size: 60px;
    line-height: 1;
    text-transform: uppercase;
    margin: 0;

    }

    #title a,
    #title a:hover {
    color: #fff;
    text-decoration: none;
    }

    #description {
    font-family: 'PT Sans', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    }

    p#description {
    color: #777;
    }

    #header .widget-area {
    float: right;
    padding: 40px 0 0;
    width: 600px;
    }

    /* Image Header - Partial Width
    ------------------------------------------------------------ */

    .header-image #title-area,
    .header-image #title,
    .header-image #title a {
    /* display: block; */
    float: left;
    /* height: 115px;
    overflow: hidden;
    padding: 0;
    text-indent: -9999px;
    width: 350px;*/
    }
    } // End bhww_filter_genesis_seo_site_title

    //* Original Image Header CSS
    .header-image #title-area,
    .header-image #title,
    .header-image #title a {
    display: block;
    float: left;
    height; 115px
    overflow: hidden;
    padding: 0;
    text-indent: -9999px;
    width: 350px;
    }
    */

    .header-image #description {
    display: block;
    overflow: hidden;
    }

    http://redpark.wpengine.com/shop/
    September 10, 2013 at 12:56 am #61626
    Robin
    Member

    On quick glance, I would say go back and make sure you have your code correct in your functions.php because the line you posted above that reads:

    } // End bhww_filter_genesis_seo_site_title

    should be in your functions.php not in the style css.

    If you have further questions about the code, John at BlackHillsWebWorks is very responsive at troubleshooting issues that people have using his tutorial.


    Need help customizing your website? Let me know at RKW Media.

    I’m taking up The Challenge by answering some of the Unanswered Posts.

    September 10, 2013 at 1:06 pm #61735
    John
    Participant

    Hey Bill,

    I would make the following changes to your style.css:

    Delete or comment out line 222 completely:
    .header-image #title-area, .header-image #title, .header-image #title a {float: left;}

    Same with line 187:
    #title {...}

    And in line 178, #title-area, I would comment out the following:

    
    min-height: 100px;
    width: 350 px;
    

    and I would probably change the padding in line 178 to:

    padding: 15px 0 0 15px;

    to add some padding to the left of your logo image. That one's my personal opinion, as it looks like it could use some room on the left side of the logo...

    Otherwise, nice job!

    John


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

    September 10, 2013 at 4:31 pm #61797
    worldviewpr
    Member

    Thanks, that seems to have done the voodoo that you do so well.

    One adjustment I made was to make the left padding smaller to better center. Thanks, again.

    I've gotten more done on Gensis in a week than struggling with Thesis 2.1 for a 6 weeks. Run away.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 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