Responsive Header image in Media Queries – one size won't show up

[David Borrink]

It's my first Genesis child theme and for my client I'm putting responsive header images in. I've got a 1060x400 version at full size. When I start the media query reductions and go below 1200px, I have a 960x362 version, but it's not showing up. The 1060x400 version remains, but is cropped off at the ends with a 960 width to match the .site-inner class. I can't figure out why the 960x362 version of the header isn't showing up.

I reduce my browser width below 1200, but Firebug tells me that the CSS is saying...

.site-header .wrap {
    background: rgba(0, 0, 0, 0) url("http://www.learning-engineer.com/wp-content/uploads/2016/05/le-header-1060x400.png") no-repeat scroll center center / cover ;
    height: 400px;
}

And yet, my CSS file says...

@media only screen and (max-width: 1200px) {

	.site-inner,
	.wrap, 
    .nav-primary, 
    .site-footer,
    .site-header {
		max-width: 960px;
	}
    
    site-header .wrap {
    background: url("http://www.learning-engineer.com/wp-content/uploads/2016/05/le-header-960x362.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 362px;
}

The next size down is at 960px where a 800x302 image is used, and that's showing up just fine. I've double-checked that I have all the images loaded and coded correctly, but I'm not seeing why the 960x362 version isn't showing up.

I'm chalking this up to being my first project with Genesis, so I'd like to ask if someone could point out the (apparently) obviously mistake I'm making. I've had no problem doing this with many sites using TwentyTwelve as my base theme, so it must be a Genesis thing that I need to be aware of. Thanks for your time!

http://www.learning-engineer.com/

[Victor Font]

You are missing the period in front of .site-header in the media query.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[David Borrink]

Wow. I can't believe I missed the dot in front of site-header. Thanks, Victor. I guess I was working too late when I did that. And not a rookie mistake, either.

Problem solved.

[Victor Font]

Not a rookie mistake, but a common one. I looked for it because I do it all the time when copy/pasting.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Author]

Posts