WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Remove White Space from Twenty Twelve Home Page (16 posts)

  1. SunnySunflowers
    Member
    Posted 1 year ago #

    I am using a child theme of the Twenty Twelve theme. I want to decrease the white space between the bottom of the menu and the top of the page content, but only on the home page. I added this code to my stylesheet, but it did not have an effect on the white space on any page:

    #page {
    	margin-top: 0;
    }

    Message with similar issue that had the code.

    Does anyone know how I can do this?

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  3. zeaks
    Member
    Posted 1 year ago #

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

  4. SunnySunflowers
    Member
    Posted 1 year ago #

    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 http://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.

  5. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

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

    http://en.support.wordpress.com/

  6. SunnySunflowers
    Member
    Posted 1 year ago #

    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.

  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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;
    }
  8. SunnySunflowers
    Member
    Posted 1 year ago #

    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?

  9. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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:

    http://www.w3schools.com/css/

  10. SunnySunflowers
    Member
    Posted 1 year ago #

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

  11. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    You're welcome, glad to hear it!

  12. joergenlie
    Member
    Posted 1 year ago #

    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

  13. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  14. dougmeister
    Member
    Posted 1 year ago #

    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;
    }

  15. marmara34
    Member
    Posted 1 year ago #

    .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.

  16. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic