Setting Size of Header in CSS

Community Forums Forums Design Tips and Tricks Setting Size of Header in CSS

This topic is: resolved

Tagged: ,

This topic contains 2 replies, has 3 voices, and was last updated by  John 1 year, 11 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #68300

    Chris Moore

    Hello StudioPress Community!

    Need some CSS help on this site that I am working on:

    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 @ / Blogging @

    • This topic was modified 1 year, 11 months ago by  Chris Moore.
    • This topic was modified 1 year, 11 months ago by  Chris Moore.


    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+




    I’d try

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


    John Sundberg |
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google ;)

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

You must be logged in to reply to this topic.