Change space below header on Pages (Twenty Eleven)

Since you’re new with WordPress. I suggest that first of all you install the plugin called Jetpack for WordPress – https://jetpack.me/

Then, activate the Custom CSS features – https://jetpack.me/support/custom-css/

Add this CSS to reduce the size of the padding:

.singular.page .hentry {
	padding-top: 0px !important;
}

Thanks! I had not noticed the jetpack CSS feature. That gives me something good to play with.

I added that code in my child theme’s style.css … it took of a lot of padding. Cool. I noticed that you can add extra padding pixels… but is there any way to get it all the way flush against the header?

That probably wouldn’t look good, but it’d be nice to know how to do it.

Hi there,

There could few other things that result the spacing, e.g. padding and margin. Padding and margin can be set for every elements for example the header.

Case: Since header is available across the site, if I want a gap of 20px below the header, I can set header to have margin-bottom: 20px;

If you want to learn more, we have an article called CSS Troubleshooting.

But if you’re more of a visual person you can watch this video on using Chrome to “Inspect Element” and edit the CSS code.

But you have to copy the CSS you add or remove on to your website ie the style.css or the Jetpack custom css.

Let me know if it works and if all is good, it would be awesome if you can mark this as resolved for the benefit of others ??

Ok, thanks. I will see if I can find the section in the header that applies to that…

I’m at the stage right now where I can’t figure out how to connect the information in Firebug to what’s going on in the actual files. From a newbie perspective, there’s just a lot of info and even though TwentyEleven is supposed to be a basic theme, it’s pretty darn complicated.

One thing that might help would be if you know me file and line numbers (for example, which line numbers in the twentyeleven’s default header.php or style.css file apply to this… ?)

I realize that that is what firebug tells me, but I just haven’t figured out how to connect the dots yet.

Thanks,
Greg

Hi there,

I think you miss this part:

But you have to copy the CSS you add or remove on to your website ie the style.css or the Jetpack custom css.

You have to copy the CSS changes you made and paste it on your style.css for it to happen.

What Firebug and Inspect element provide is for you to edit the CSS live, but it is only to guide you to debug. It doesn’t change the CSS file, you still have to edit your style.css yourself.

In the “header” section of style.css, I played with “padding-bottom” and “margin-bottom”. I successfully changed the distance or negative distance between the header (my banner.jpg) and the horizontal black navigation bar.

However, I was unsuccessful in changing the vertical distance (decrease the white space) between the navigation bar and the content of my static pages.

My URL is https://jamiepoindexter.net/WP2/ in case it helps anyone to see what I am describing. That’s a lot of white space between the navigation and the content.

What do I need to change in style.css to reduce this space?

P.S. I am using Dreamweaver to edit the css file.

My question exactly Jamie! Please let me know if you figure something out.

Greg

Add this to the CSS:

.singular.page .hentry {
    padding: 0;
}

#main {
   padding: 0;
}

The best tool for working with CSS is Firebug — shows you exactly the CSS that is affecting an element on the page.

Both of you be very sure that you are not changing theme files directly — use the Custom CSS plug-in or a child Theme.

Thanks Yogi! That cut off about half the padding below the menu bar for me.

I found I could get rid of *almost* all the rest of it with this line:

.entry-content, .entry-summary {
padding: 0em 0 0;
}

… but chose not to use it because a little padding is nice after all.

little padding is nice after all.

Hmm, that could apply to a number of things :)! But good job on the sleuthing.

Thanks WPyogi! My pages now look better, exactly how I wanted them.

I’m modifying theme files directly. What is the problem with that?