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?
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.
You must be logged in to reply to this topic.
Are you a blogger, web designer, developer, or website owner looking to generate more income?
Promote products for the largest and fastest growing online website platform as part of our affiliate program.