Trying to reduce height of header-area blank spaces

  • eftbet5

    (@eftbet5)


    10 years, 10 months ago

    Thanks for any help. My theme is Elegant Photography; my url is
    http://www.ephemeralbeauty.com

    I have a child theme set up, and my goal is to reduce the empty vertical space near the top of the pages so the photos in the home page slide show and in the posts are fully visible without having to scroll down a notch.

    Trying to reduce height of empty space here:
    – – from top of page to top of blog name,
    – – from bottom of blog name to top of navigation buttons
    – – from bottom of navigation buttons to top of slideshow on home page, and to top of post name on the post pages.

    On the advice of a friend who knows some css, I put this code into the stylesheet for my child theme, changing the margin in the navigation section from 50 to 10, and the height in the logo section from 150 to 90:

    #navigation {
    width:100%;
    height:48px;
    border-top:solid 1px;
    border-bottom:solid 1px;
    margin:0 0 10px 0;
    }
    #logo div{
    display: table;
    text-align: center;
    height:90px;
    width:100%;
    }

    But – it didn’t make any difference in the appearance. I’m new to css but did successfully make a few changes last winter to a different site that uses the twentyeleven theme, and it seemed to follow the structure of these changes (entered in the style.css sheet, used the # tag, used the brackets.

    Is there some difference in how the child theme functions in non-WP themes? Am I doing something else wrong?

    Thanks again for any help, and if you’re one of the two people who responded to a post of mine from many weeks ago, about navigation button hover color- thank you and I haven’t been able to implement that yet!

    Betsy

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

    (@jhilldesign)

    10 years, 10 months ago

    I took a quick look at your site’s CSS. There are several <div>‘s containing the logo. You will need to adjust the height of the “#logo” & “#logo div” elements to deal with the space around your logo. Then you will want to reduce the hight and bottom margin of the “#navigation” div.

    If you aren’t sure exactly what you are adjusting you will have better luck adjusting it in the element inspector (Chrome) or firebug (firefox) and then copying the code to your theme when you have it right.

    Hope that helps.

    Thread Starter eftbet5

    (@eftbet5)

    10 years, 10 months ago

    Thanks, JHill, for your help! I’m so new to css that I can’t really follow what you’re saying.

    I think I need a step by step, as in “paste this code into your child theme’s style.css sheet”

    Does this – “There are several <div>’s containing the logo” – mean that I can’t get the changes I want by putting code into the child theme style.css sheet? (That’s what I was coached to do last winter, to make changes to my other site, twentyeleven theme, so I know how to find that and do that.)

    Thanks again,
    Betsy

    Thread Starter eftbet5

    (@eftbet5)

    10 years, 10 months ago

    p.s. To explain a little further – I think I did what you are saying I should have done, but I did it in my child theme style.css sheet.

    I made changes to the height, inside the brackets, for #navigation and #logo div, but it didn’t change the appearance. Can you explain why not, and/or what I should do instead?

    Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Trying to reduce height of header-area blank spaces’ is closed to new replies.