Responsive Design Header Trouble

[wolfcoach]

I've set up a web site (www.gemsntreasures.com) with a responsive header image for smaller screens. However, when the screen size shrinks, the original full-sized header image is still showing up and the responsive design elements are appearing behind it.

I'm having trouble locating the CSS that says "stop displaying the full-sized header when screen size shrinks". Any help would be appreciated.

Thanks in advance.

http://www.gemsntreasures.com

[CalliaWeb]

Hi

It looks like the full size header image is a background style of .header-image .site-title a, whereas your responsive background images are applied to .header-image .site-header .wrap, so they are being displayed as well rather than instead off.

Try changing .header-image .site-header .wrap to .header-image .site-title a in your media queries.

Cheers
Jo

[Tony @ AlphaBlossom]

Hello,

In your theme's styles.css file, towards the end you have several media queries that start with @media only...

The one that says @media only screen and (max-width: 1023px) has:

.header-image .site-header .wrap {
    background: url("http://gemsntreasures.com/wp-content/uploads/2014/04/header-768.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}

Your main image is on ".header-image .site-title a", so you can either add this to before the rule above:

.header-image .site-title a {
    background: transparent;
}

Instead of that, I would recommend changing the ".header-image .site-header .wrap" above to:

.header-image .site-title a {
    background: url("http://gemsntreasures.com/wp-content/uploads/2014/04/header-768.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    background-size: contain;
}

You should change it both for 1023px media query and 767px media query.

Now instead of specifying the background images in two places (the wrap and the title), you're just changing the image used in one location (the title).

Also, the "background-size: contain;" will help keep the background image from being cut off. You will probably want to adjust the height at various browser widths so it's not so tall with a smaller image. Please note the is not supported by internet explorer 8, so if that's an issue you'll have to find another solution (adjust image sizes, jquery plugin, etc).

I hope that helps!

Tony

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[wolfcoach]

Thank you both - you nailed it!

...And that's just one of the problems with copy and pasting from online tutorials 🙂

Again, thank you both!

[Tony @ AlphaBlossom]

awesome, glad we could help! Sorry for the double post, Jo's reply wasn't there when I started 🙂

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[Author]

Posts