Remove White Space from Twenty Twelve Home Page

If you post a link to your site, someone can likely help you. Or try using Firebug to look at what CSS is creating that space.

BTW, CSS is totally theme specific, so the post you linked to is totally not relevant.

Try
body .site { margin-top: 0; }

zeaks, thanks for the code. Unfortunately, it did not work.

WPyogi, my site is still being set up. I have a test site with the Twenty Twelve theme at https://mytestpresssite.wordpress.com/.

On just the home page, I want to narrow the white space between the bottom of the menu and the start of the page.

You’re in the wrong forums — these are for self-hosted WP sites. You need to go to the WP.COM forums:

https://en.support.wordpress.com/

I am not in the wrong forums. I should have probably explained more why I referenced a .com site. My .org site is not available for display as it is under development–I don’t have a site to display on .org. I do, however, have the .com test site which is using the same template. The question pertains to the .org site. Regardless, they are both using the same template, so it should not matter whether the site is on .org or .com in terms of the CSS that is needed.

Okay, but be aware that the same themes are not necessarily identical between .com and .org versions. I don’t know about this theme, so it may or may not work. In the .com site, the margin in this CSS is creating that space:

.main-navigation {
    margin-top: 1.71429rem;
    text-align: center;
}

WPyogi, thanks for you answer. It got me to the right place. I was able to find the setting for the space between the bottom of the menu and the top of the page content (where it says “Home”).

Here is what I came up with to change that space:
.site-header {padding-bottom: 0rem;}

I only want this setting to affect the static front page. I tried using the is_front_page function to no avail.

<?php if (is_front_page()) : ?>
    .site-header {padding-bottom: 0rem;}
<?php endif; ?>

Looking through a number of messages, it looks like I would either need to use wp_reset_query() or place the code in page.php or header.php, or something like that. I tried adding wp_reset_query() to various parts of the if statement (I don’t have any kind of programming background), but nothing I did worked. I would rather add the code to the stylesheet than start fooling around with page.php or header.php. Do you know if there is a way to get this to work in the stylesheet CSS?

You only need to use CSS to do changes like this. Don’t even think about putting styles inline in HTML code! The trick is to use CSS selectors so that only the home page is affected — in this case, the home page has a class of “home”. So try this:

.home .site-header {padding-bottom: 0rem;}

A good CSS reference site is here:

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

Thanks a lot, that worked great! It gave me exactly the look that I wanted.

You’re welcome, glad to hear it!

Hi!
I’ve tried the above suggestions but cant’t get it to work in my site fossumlie.no

I want the nivo slider to lay just under the menu so there is no white spacing in between.

I’ve made my the adjustments to a child theme style.css like this:

/*
Theme Name: Twentytwelve Child
Description: Child theme for the twentytwelve theme
Author: Your name here
Template: twentytwelve
*/

@import url("../twentytwelve/style.css");

.home .site-header {padding-bottom: 0rem;}

.home .entry-title {
   display: none;

I appreciate your help:-)

J?rgen

This thread is marked resolved and belongs to someone else.
If you require assistance on your own issue, consider creating your own thread.

As a followup, I tried some of the suggestions, but for the twenty twelve theme, what worked for me is adjusting the margins like below

/* this removes the margin/space above the menu */
.main-navigation {
margin-top:0px;
}

.site-content article {
    border-bottom: 4px double rgb(237, 237, 237);
    margin-bottom: 5.14286rem;
    padding-bottom: 1.71429rem;
    word-wrap: break-word;
    -moz-hyphens: auto;

I tried all the suggestions above but none of them worked for me. Finally I found the CSS code which was causing the double lines. Just remove the line that starts with “border-bottom …” in the style.css. Also you can clear the space by removing the other two codes below one that I mentioned earlier.

Hope this helps for those who had the same problem with me.

Just remove the line that starts with “border-bottom …” in the style.css.

That change is going to be erased when the theme updates.

If you want to avoid this, try overriding the CSS using a Custom CSS plugin or Child Theme. That means creating new styles that override old ones.