Header Image Not Responsive

[keithmoore43]

Beginner web guy working with a Genesis sample theme. I got my page looking good on my monitor, but it changes in ugly ways when I start checking it out on other monitors or my iPhone. In particular I created a header image that extends the width of the screen on my monitor, but it doesn't expand on other monitors, leaving a green space on the right edge of the header.

As far as I can tell I have the width: 100% set for this image in the css code related to this image, but the problem is there, so I must be missing something. Any pointers?

http://www.keith-moore.net

http://www.keith-moore.net

[Adam Bradford]

Hey Keith,

Try this

.header-image .site-title > a {
    background: url(http://keith-moore.net/wp-content/uploads/2016/01/keith-banner-final.gif) no-repeat center;
    float: left;
    min-height: 120px;
    width: 100%;
    background-size: cover;
}

@media only screen and (max-width: 960px){
    .site-header .wrap {
        padding: 0;
    }
}

---

Adam Bradford

Director of Web Development at Highforge

[keithmoore43]

OK, the image now stretches out on different monitors. Thanks!

But on mobile screens it only uses a fraction of the image. Do I need to fix this under @media in the CSS section?

Didn't realize the can of worms I opened with all this stuff going out of whack on different screens. I still gotta figure out why the widget and main body areas are so far apart as well...

[keithmoore43]

Going to bump this and see if there are any other ideas to pursue. I understand I need to change the CSS related to my media queries, but I'm not sure what to change. Do I need to create resized images for each one? Setting width: 100%; doesn't work.

For starters I just want to get the header image on the iPhone to look the same as the desktop. So I'd be modifying "@media only screen and (max-width: 800px)" correct?

[Author]

Posts