Getting Custom Title Image to be Responsive

[worldviewpr]

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/

[Robin]

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.

[John]

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 😉

[worldviewpr]

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