Need help? Check out our Support site, then


Reduce white space using CSS in clean home theme

  1. Hello,

    I would like to reduce the white space at the top of my blog (http://ianmmcclelland.me) - above the main menu and around the Twitter feed but I'm new to CSS and I'm struggling to get it right.

    If anyone could provide some help or advice, that would be very much appreciated!

    Thanks

    The blog I need help with is ianmmcclelland.me.

  2. To decrease the white space above the main menu at the top of the Clean Home theme, try this:

    #wrapper {
    margin-top: 0px;
    padding-top: 0px;
    }

    Adjust the numbers if you want to add back a little space.

  3. To update the padding above and below the header widget area (where your Twitter widget is placed right now) in the Clean Home theme, try this:

    #blurb {
    padding: 10px 0;
    }

    10px in that rule represents the top and bottom padding. Adjust the number as necessary.

    And welcome to using CSS! Happy to have you here. :)

  4. You might also consider adding a little spacing or borders around the individual tweets as they look a little clumped together to me right now. Try this as a starting point:

    .tweets {
    border-top: 1px dotted #ddd;
    }
    
    .tweets li {
    padding: 3px 0;
    border-bottom: 1px dotted #ddd;
    }
  5. ianmmcclelland
    Member

    Excellent, thanks a million!!

    I'm not sure now though... I liked having the tweets at the top as it looked more regularly refreshed, but I don't like the blog title being so low and the image falling beneath the fold.

    I've changed now so the twitter feed is in the RHN - what do you reckon?!

    Thanks again :)

  6. If you wanted to reduce the spacing between the header image and the content a little more, you could add this:

    .home .hentry:first-child h1 {
    margin-top: 10px;
    }
    
    .home #sidebar .block:first-child {
    padding-top: 15px;
    }

    Adjust the numbers as necessary.

    You could also try floating the top menu left to see if you like that.

    #nav {
    float: left;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic