How to Enable a Responsive Header Image on the Executive Theme

[dan]

Hello,

I am using the Executive theme and trying to get the header image to be responsive.  As suggested in another forum post I found in a search, I added "background-size: contain;" to the #header definition in the CSS file.  That works as far as width goes, and the image scales height-wise, but the header container maintains a constant pixel height regardless of screen width.  On smaller screens, that means there's a large blank space that shouldn't be there.

I've tried removing the min-height definition but that results in the entire header image vanishing, leaving just a blank space.  I've also tried setting the height to 100% or auto, but those did not work either.

I'd just like the height to adjust along with the width so there is no blank space on smaller screens.  Any ideas?

Thanks!

[cehwitham]

Hi Dan,

Could you provide a link to your site please so I can take a look at what is going on and help you resolve this please?

Chris

---

Twitter: cehwitham Web: cehwitham.com

[theorganicbird]

I'm having the same issue ... here's the site I'm working on — applebarrelcountrystore.com .... I am trying to figure out what I'm doing wrong. I just want the header to flow 100% across the top, regardless of what device people are on. I've even installed the Genesis Responsive Header plugin but that doesn't seem to fix anything. I've been at it for a couple hours now, messing with the CSS in the media-only section, but to no avail.

Help?

[cehwitham]

Theorganicbird: your header is responsive, it just doesn't become responsive until 800px wide. So between 1200px and 800px it gets cut off. You'd need to increase the width on the first media query to make it responsive earlier.

---

Twitter: cehwitham Web: cehwitham.com

[OliveBurbank]

Hi Cehwitham,

I am having the same issue - I did install the Genesis Responsive Header Plugin - that seems to be working fine. It is when I am coming down from 1280 x 800 that the header does not adjust.

I tried this piece of code I found in WordPress forum - it changed nothing.
#header_area {
background: url('http://virtuosity.com/wp-content/uploads/2013/09/Virtuosity-Header-131.png');
background-repeat: no-repeat;
background-size: 100%;
}

When you mentioned above "You’d need to increase the width on the first media query to make it responsive earlier." I am afraid I don't understand what, where needs to be changed.

Could you please take a moment and expand on what and where the change needs to take place.

Thank you.

[Author]

Posts