Getting Custom Title Image to be Responsive

Community Forums Forums Design Tips and Tricks Getting Custom Title Image to be Responsive

This topic is: not resolved

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #61559

    worldviewpr
    Participant
    Post count: 48

    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/
    #61626

    Robin
    Participant
    Post count: 151

    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.

    #61735

    John
    Participant
    Post count: 157

    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 ;)

    #61797

    worldviewpr
    Participant
    Post count: 48

    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.

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

You must be logged in to reply to this topic.