responsive header image for genesis theme site

[mikesuptown]

hello,

i am using a custom header image for my genesis powered (genesis sample child theme) site, which is
here: http://www.newhomenegotiators.com/

i am trying to make the header image mobile responsive but having no luck. I've tried a couple of basic
hacks to my styles.css (see below).

Is there anything else I can do to make the header image re-size for mobile devices? I read somewhere that
there was a plugin (genesis response header), but I didn't want to go that route if i could fix my functions.php
or styles.css to make the header responsive.

Any help is greatly appreciated... thanks!!!

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

.site-header {
background-color: #fff;
/* background-color: #DAD7D2 */
}

.site-header .wrap {
padding: 40px 0;
padding: 4rem 0;

}

/* Title Area
--------------------------------------------- */

.title-area {
float: left;
font-family: Lato, sans-serif;
font-weight: 700;
padding: 16px 0;
padding: 1.6rem 0;
width: 320px;
}

.header-image .title-area {
padding: 0;

}

.site-title {
font-size: 28px;
font-size: 2.8rem;
line-height: 1;
margin: 0 0 8px;
margin: 0 0 0.8rem;
text-transform: uppercase;
}

.site-title a,
.site-title a:hover {
color: #333;
}

.site-description {
color: #999;
font-size: 16px;
font-size: 1.6rem;
font-weight: 300;
line-height: 1;
margin-bottom: 0;
}

/* Full width header, no widgets */

.header-full-width .title-area,
.header-full-width .site-title {
width: 100%;

}

.header-image .site-description,
.header-image .site-title a {
display: block;
text-indent: -9999px;
}

/* Logo, hide text */

.header-image .site-header .wrap {
/* background: url(images/logo.png) no-repeat left; */ /* this line removed to support custome header */
/* margin-top: 20px; this rule adjusts height of logo in relation to top margin */
padding: 0;
}

.header-image .site-title a {
/* float: left;
min-height: 164px;
width: 100%;
*/

/* the following is new code to support custom header with mobile support; i commented out the above */
background: url(http://www.newhomenegotiators.com/wp-content/uploads/2014/02/NEW_HOME_NEGOTIATORS_HEADER2.png) no-repeat;
height: 164px;
width: 1140px;
}

/* Widget Area
--------------------------------------------- */

.widget-area {
word-wrap: break-word;
}

.site-header .widget-area {
float: right;
text-align: right;
width: 800px;
}

.header-image .site-header .widget-area {
padding: 40px 0;
/* padding: 10px 0;
padding: 4rem 0; */
}

.site-header .search-form {
float: right;
margin-top: 24px;
margin-top: 2.4rem;
}

http://www.newhomenegotiators.com/

[Kristie Hill]

Hi! This is a GREAT tutorial from Lindsey of Pretty Darn Cute Designs on creating a mobile responsive full width header. https://prettydarncute.com/2014/10/genesis-full-width-header-tutorial-option-2/

If your theme doesn't support a custom header, you could also use this tutorial from Carrie Dils: http://www.carriedils.com/add-logo-genesis-theme/

---

Kristie Hill

[Author]

Posts