Twentyeleven white space issue

  • Resolved Pvteyez

    (@pvteyez)


    12 years ago

    I’ve been a programmer for 25 years but brand new to wordpress and php. I’m doing a site for myself so I decided to learn. I’m muddling through but have an issue. The static home page for my site has an image just below the menu. I’d like to make the image bigger but there is a bunch of white space between the menu and the image that I can’t get rid of. The site looks a bit amateurish but its a learning tool for me. I’ve read all the posts on getting rid of titles and eliminating white space but can’t figure this one out. Please take a look and see if you can help. I’d like the image top to be right under the menu.

    https://www.pvteyez.com

Viewing 6 replies - 1 through 6 (of 6 total)
  • Andrew Bartel

    (@andrew-bartel)

    Your new best friend: Firebug

    Thread Starter Pvteyez

    (@pvteyez)

    ?? I did install firebug. Still learning how to use that one too! I seemed to have been able to get rid of most of the white apace as I can put the title right under the menu. But when I eliminated the title on the home page in favor of a custom menu it still leaves a big space between the menu and my banner.

    WPyogi

    (@wpyogi)

    The other thing you really need to be doing is using a Child Theme. The entry header code is still creating that space — just leaving it blank does not get rid of all the space created by the HTML code for it. The trick to that is to use “display: none;” in the CSS code for that element. So in this case, you might use:

    .entry-header {
   display: none !important;
}

    Thread Starter Pvteyez

    (@pvteyez)

    You rock! I put those three little lines in my child theme and it fixed it right up. I spent all day on that yesterday! I’ll update the site as soon as I redo the banner. Thanks.

    One more question…

    What is the significance of the !important keyword and can you recommend a good tut for firebug. I can see where knowing firebug will be a tremendous help. It would have been nice to use firebug to isolate that css entry.

    WPyogi

    (@wpyogi)

    Firebug’s site has great how-to info. The !important is a way to make that CSS code override any other CSS code applied to that element. CSS works by “specificity” so if another CSS style was something like:

    .singular .entry-header

    it would override the one you added. The above says to apply the style to entry-header when they are inside an element with the singular class — which in this case means the single page template). I saw that there were quite a few styles applied more specifically to that element, and I figured you wanted that gap removed on all pages, so that’s why I used the !important. It’s actually best to use it only when really necessary — but in this case, it was easier than tracking down more specific CSS selectors for every single page you might have.

    This is a good CSS reference if you want to learn more:

    https://www.w3schools.com/css/

    There’s tons more out there — including tutorials, videos, etc.

    Thread Starter Pvteyez

    (@pvteyez)

    Thanks for your help. I’ll definitely be looking at that link.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Twentyeleven white space issue’ is closed to new replies.

Tags