Twenty Eleven Space below header

  • Can anyone please advise what I need to change to reduce the white space that you see on pages beneath the header image but above the page title.

    Also, can anyone suggest a good resource to help me figure out for myself what I need to change if I want to alter the page layout, rather than having to ask each time.

    Many thanks in advance!

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

  • I just finished tearing through twenty eleven from one end to the other. The CSS is a monster if you’re not used to it.

    Best to start simple until you feel more comfortable. Open the site in Google and right click over something to get the “inspect element” which is Googles built in Firebug of sorts.

    Whenever an element looks off, I tend to inspect it with this. The right hand panel will tell you what rules are effecting the element and where you can find it in the css or whatever stylesheet is effecting it. And the bottom of the inspection bar shows the order of the containing elements.
    So if you’re trying to fix an element in the header and you hover over the item and go to “inspect” you can find that items property and on the bottom see how its contained like:
    div.header div#branding div#site-title ……

    Then you can add the new changes noting how it effects the site.

    You might want to start with .page-title around line 500 (I alter the code so I don’t know what line it was originally on)
    What I found was to change the line height to 1em for starters. Heres what I did

    .page-title {
    color: #666;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1em;
    text-transform: uppercase;
    }
    .page-title a {
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0;
    text-transform: none;
    margin-left:-9999px; /* in the event you don’t want to see the title but leave it for readers */
    }

    Do not edit the Twenty Eleven theme. It is the default WordPress theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. First create a child theme for your changes.

    Thread Starter gnjuser

    (@gnjuser)

    the Workshop – Your answer is fantastic! Exactly what I needed to know. That “inspect element” is a very useful utility. Many many thanks!!

    esmi – Don’t worry, I’ve been working from a child theme from the beginning, thanks to the many warnings in the Support Forums about the need to do this.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Twenty Eleven Space below header’ is closed to new replies.