How to Enable a Responsive Header Image on the Executive Theme

Community Forums Forums Design Tips and Tricks How to Enable a Responsive Header Image on the Executive Theme

This topic is: not resolved

This topic contains 4 replies, has 4 voices, and was last updated by  OliveBurbank 1 year, 2 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #19398

    dan
    Participant
    Post count: 1

    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!

    #21250

    cehwitham
    Participant
    Post count: 396

    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

    #22235

    theorganicbird
    Participant
    Post count: 4

    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?

    #22305

    cehwitham
    Participant
    Post count: 396

    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

    #63524

    OliveBurbank
    Participant
    Post count: 14

    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.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.