Support » Themes and Templates » Twenty Eleven Theme – Space Between Banner and Post

Twenty Eleven Theme – Space Between Banner and Post

Viewing 15 replies - 1 through 15 (of 22 total)
  • esmi


    Forum Moderator

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

    For this reason, it is recommended that you consider creating a child theme for your customisations. Once your child theme is active, we should be able to help with the customisation.

    Of course, already did that. But thanks for the reminder. 🙂

    Have various other css changes already in the style.css for the child-theme, just stuck on that spacing and then of course the messed up tables which seems to be more related to image handling. I just created a sample post without a table, just an image and with the text to the right. But once again, almost the same behavior, the text (after first line) gets pushed below the image for some reason, although it looks fine in the editor.

    That sample post is on the home page.


    Thanks for your help 🙂



    Forum Moderator

    Try changing padding: 4.875em 0 0; to padding: 0;:

    .singular .hentry {
        border-bottom: medium none;
        padding: 4.875em 0 0;
        position: relative;

    Thanks kindly! That certainly moved it up a bit, but not all the way. Can there be something else, like padding around the topic titles which is still pushing it down?



    Forum Moderator

    The page navigation at the top of single posts also has some padding which could be reduced to padding:0;.

    #content nav {
        clear: both;
        overflow: hidden;
        padding: 0 0 1.625em;

    Thank again! Unfortunately it did not make any difference. But now that I have you here, any chance you might have an idea as to how to get a table correctly formatted?

    I am trying to create a nice, simple tight block of text next to an image, but no matter what I have tried, even though the table looks fine in the editor, its messed up on the page. Even when I dont use a table, and just insert an image, only the first line of text remains next to the image and all the rest gets pushed below?

    Ideally I would like to create something that looks like this


    Hey guys I am having the same issue as the OP, with WP v.3.2.1 & 2011 v.1.2. For the life of me I can’t significantly reduce the whitespace between the navigation bar and the page title.

    I know my way around CSS fairly well, but I’ve only been able to reduce the space by about 10px so far, with another 70px or so more to go. Nothing I’ve tried has worked, and I’ve been through the entire style sheet several times, tweaking dozens of settings in Dreamweaver and viewing locally, as well as trying to identify the problem attributes in dev-mode in Safari to no avail.

    Any other ideas as to how to reduce the whitespace? In the attached image the red line represents the gap I want to significantly reduce.


    Hi there rkblack. Actually our issues are slightly different. I have been able to reduce the spacing between the nav-bar and the PAGE titles (about, home, contact etc) with this (in a custom style.css child-theme)

    .singular.page .hentry {
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;

    .singular .hentry {
    border-bottom: medium none;
    padding: 0;
    position: relative;

    Where I am having a problem is with the space between the nav-bar and a POST title, like on this page:

    Universal/Global Ethics: Is there such a thing? What would they look like?

    Have you been able to reduce the space between the nav-bar and POST titles?

    Thanks for the tip BigBirdy. Your code reduced the space significantly, down to about 60px. I then added the value

    margin-top: -30px;

    onto both entries, which gave me the perfect spacing I was looking for by moving it up even a little higher. Thanks for the help!

    As far as spacing on post titles I can’t help you there, since this site I am making is only static pages, I am not doing a blog component on it, thus no post pages, only page pages.

    Glad to hear it worked rkblack! I also added your suggestion, but as -15px and now I have used up a bit more of that space as well! Together looks like we both solved that part of the problem! 🙂 Thanks.

    Now I just need to figure out:

    1: How to remove “Featured” from the sticky post on the home page.

    2: Those darned table issues! Just cant seem to figure this one out and it really messes up the posts. They look fine in the editor and even trying to create them without a table, just an image/text, everything past the first line gets pushed below a head-shot!

    3: White space between nav-bar and POST titles

    Great info, exactly what I am trying to do! My only question is that I can’t seem to find where I would go to make the change.

    @neyv Look in the /wp-content/themes/twentyeleven/style.css file. You can edit it with any basic text editor. If you’re not familiar with CSS you may want to save a backup copy of the CSS file before you make any changes, so you can restore the default code if you accidentally mess something up.

    please – don’t edit Twenty Eleven directly – read again: http://wordpress.org/support/topic/twenty-eleven-theme-space-between-banner-and-post?replies=13#post-2218056

    a fully functional default theme is needed in case of problems.

    @rkblack I am working in a child-twentyeleven them. I am pretty familiar with CSS. Maybe I am blind, but I cannot find anything, anywhere that resembles:

    “.singular.page .hentry {“


    .singular .hentry {

    Is this because it needs to be added? If so, where exactly?



    Forum Moderator

Viewing 15 replies - 1 through 15 (of 22 total)
  • The topic ‘Twenty Eleven Theme – Space Between Banner and Post’ is closed to new replies.
Skip to toolbar