changing header height in twenty eleven theme

  • Author
    Posts
  • #728718

    jwmcnair
    Member

    Hi,

    I’m trying to use the CSS Stylesheet Editor to change the size of the header in the Twenty Eleven theme. It takes up too much real estate on my blog’s home page, and I want to reduce its height so that the header doesn’t dominate as much. Of course, I still want it to run the usual width of the post area.

    I’m a beginner at CSS. I’ve tried editing the “#branding” or “#branding img” selectors so that “height: 50%;” and “width: 100%;” but that doesn’t seem to work. If I try only changing the width to 50%, then the image shrinks in both dimensions–but as I said I want to leave the width dimension untouched.

    Maybe I’m not coding right, or maybe there’s an entirely different way of going about this. I’d greatly appreciate any suggestions….!

    The blog I need help with is jaymcnair.wordpress.com.

    #728906

    The site linked to your username says this:

    findingnorthkorea.wordpress.com is no longer available.

    The authors have deleted this blog.

    We need a link to the site you are talking about.

    #728908

    jwmcnair
    Member

    Sorry–when I posted the comment it asked me what site I was talking about, so I assumed that would be visible to all.

    Site is jaymcnair.wordpress.com

    #728938

    Here is the issue. Twenty Eleven is a reactive theme design. That means that it will automatically adjust for virtually any screen size from the largest desktop monitor clear down to a smartphone (play with your browser window width to see how that works).

    Give the following a try, but you are probably not going to like it since it will severely distort the image.

    #branding img {
    height: 144px;
    }
    #728987

    jwmcnair
    Member

    You’re right, it does distort the image; but maybe I can find a way to upload something that’s distorted equally in the wrong direction, so that when the CSS squishes the image it actually restores it to the right proportions…

    Thanks for your help!

    #728989

    You are welcome.

    A smaller image could be uploaded to the media library and then that URL could be put into one of the header divs via a background declaration, but it would very likely lose the reactive design resizing for the header image.

The topic ‘changing header height in twenty eleven theme’ is closed to new replies.