Clean Retina theme – how to make header responsive

I already tried, to no effect, the following. Though maybe I put it in the wrong place

.site-header {
background-size: 100% auto;
}

and I also tried

.site-header {
background-size: 100% 100% !important;
}

THANKS!

Hey Dgsloves! Try putting this code in your css.

.hgroup-wrap {
    width: 100%;
}

Tell me if it works or you have any other questions or problems.

-Wolfy and Brain (′?ω?`)

Hmm that didn’t seem to work. The header image is still much wider than the rest of the page content.

Here’s what’s there now:
site: baxterbell.com

Thanks Wolfy and Brain!

/* =Header
———————————————– */
#branding {
background: url(“../clean-retina/images/header-bg.jpg”);
border-bottom: 1px solid #ddd;
-moz-box-shadow: 0 7px 0 #f3f3f3;
-webkit-box-shadow: 0 7px 0 #f3f3f3;
box-shadow: 0 7px 0 #f3f3f3;
}
.hgroup-wrap {
width: 100%;
}

.hgroup-wrap a {
display: block;
}

.hgroup-wrap img {
margin-top: 39px;
margin-bottom: 13px;
}

Your image has inline sizing, this along with what @wolfs bRain suggested should overwrite it.

.header-image {
    max-width: 100% !important;
}

Hmmm, that didn’t seem to change anything. The banner is still wider than the mobile screen. I appreciate your help!

.hgroup-wrap {
width: 100%;
}

.header-image {
max-width: 100% !important;
}

.hgroup-wrap a {
display: block;
}

.hgroup-wrap img {
margin-top: 39px;
margin-bottom: 13px;
}

https://s11.postimg.org/ru9ftlaib/Untitled.png

You have something overwriting the 100% width, looks like custom css plugin or custom styling area in the theme.

Aha- I had indeed previously inserted code in the design code -> custom css. Then I had been editing in the Editor CSS. But I see the previous code area overrides the other.

THANK YOU!!!