Setting Size of Header in CSS

[Chris Moore]

Hello StudioPress Community!

Need some CSS help on this site that I am working on: http://www.ProjectSpirituality.com

I am trying to get the header banner to take the full space of the header area at the 600px media query breakpoint. Here is what I have so far:

@media only screen and (max-width: 600px) {
	.site-header {
		padding: 0px 0px;
		padding: 0rem 0rem;
	}
	.header-image .site-title a {
		min-height: 100px;
	}
}

But the turquoise background is still showing through, and hence, I know that the banner header image is not filling the entire space.

So, what padding or margin (or width or height setting?) am I missing in the CSS here?

Thanks everyone!

---

Resepctfully, Chris Moore
Web Dev, CSS Hacks, & Biz Consulting @ MooreCreativeIdeas.com / Blogging @ ReflectOnThis.com

http://projectspirituality.com/

[nutsandbolts]

Looks like it's .site-container - it's set to 94% width, which is keeping the header from expanding all the way. However, since it's also keeping everything on the site from spilling out all over the place, I don't know that I would recommend changing it. Personally I think the header looks good at all screen sizes, but you could always make the background white instead of turquoise/aqua at 600px and under if you want to give the impression that it's full width.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[John]

Chris,

I'd try

.site-header { padding: 0; }
.header-full-width.header-image .site-title a { min-height: 105px; }

John

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[Author]

Posts