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 6 months ago.

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

    Chris Moore
    Participant
    Post count: 135

    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

    • This topic was modified 6 months ago by  Chris Moore.
    • This topic was modified 6 months ago by  Chris Moore.
    http://projectspirituality.com/
    #68324

    nutsandbolts
    Moderator
    Post count: 2616

    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 do Genesis tutorials, design and development, and other fun stuff • Find me on Twitter and Google+

    #68326

    John
    Participant
    Post count: 153

    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 ;)

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

You must be logged in to reply to this topic.