February 10, 2013 at 12:33 pm #19398
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!February 19, 2013 at 5:05 am #21250
cehwithamParticipantFebruary 22, 2013 at 9:15 am #22235
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?February 22, 2013 at 4:30 pm #22305
cehwithamParticipantSeptember 20, 2013 at 8:52 am #63524
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.
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.
You must be logged in to reply to this topic.