Hi Wes, I’m working on a site and having some issues with the responsive sections for the header/logo. Here’s the link to the site.
I changed the header to be full width, here’s what’s in that section:
#header {
background-color: #ECCDF0;
min-height: 150px;
}
#header .wrap {
background: url(images/header.png) no-repeat;
min-height: 150px;
margin: 0 auto;
overflow: hidden;
width: 960px;
}
#title-area {
float: left;
overflow: hidden;
padding: 17px 0 0;
width: 600px;
}
#title {
font-size: 48px;
line-height: 58px;
margin: 0;
}
In the two responsive sections, here’s what I’ve got:
@media only screen and (max-width: 600px) {
.header-image #title-area,
.header-image #title,
.header-image #title a {
float: none;
height: 100px;
width: 100%;
}
.header-image #title-area {
background: url(images/mobile-logo.png) top center no-repeat;
margin: 0 0 20px;
}
#title-area {
float: none;
text-align: center;
width: 100%;
}
and:
@media only screen and (min-width: 600px) and (max-width: 960px) {
.header-image #title-area,
.header-image #title,
.header-image #title a {
float: none;
width: 100%;
}
.header-image #title-area {
background: url(images/logo.png) top center no-repeat;
margin: 0 0 20px;
}
#title-area {
padding: 10px 0 20px;
}
I’ve used this basic code in the past for the responsive logo/header, but never changed the header wrap to be full width, so I’m guessing that’s where my issue is, but haven’t been able to correct it. Any suggestions would be most appreciated!
.
