Reduce white space using CSS in clean home theme

  • Author
    Posts
  • #843185

    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.

    #843462

    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.

    #843463

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

    #843464

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

    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 :)

    #843477

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

The topic ‘Reduce white space using CSS in clean home theme’ is closed to new replies.