Limiting white space

Home › Forums › Automattic › Wire › Limiting white space

Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • October 7, 2013 at 4:12 pm #108696 Resolve

    Michael Roberts
    Member

    Hi,

    How do I control the whitespace between the menu header and the first blog post. Second, how do I control the space between the blog posts?

    The blog I need help with is michaeloroberts.ca
    October 7, 2013 at 6:29 pm #141290

    Kathryn P.
    Happiness Engineer

    Hi there,

    how do I control the space between the blog posts?

    This is the existing CSS code that controls the top and bottom spacing for each post:

    .hentry {
    
margin: 0 0 96px;
    
padding: 0 0 96px;
    
}

    You can adjust the margin and padding as you like to reduce or increase the spacing. Keep in mind that any CSS added under Customize > CSS overrides the existing CSS. Because of the way CSS inheritance works, sometimes you may need to add !important just before the semicolon to have it take effect on your theme.

    You could try something this, for example, and adjust it as you like:

    .hentry {
    
margin: 10px 0 !important;
    
padding: 10px 0 !important;
    
}

    Here are some handy guides to working with CSS in the WordPress.com editor:

    https://dailypost.wordpress.com/2013/07/25/css-selectors/

    http://dailypost.wordpress.com/2013/06/21/css-intro/

    http://en.support.wordpress.com/custom-design/custom-css/

    How do I control the whitespace between the menu header and the first blog post.

    Do you mean this area?

    https://cloudup.com/cuy5kuVLTK9

    If so, this is the relevant CSS:

    #primary {
    
margin-top: 100px;
    
}

    You can reduce that top margin as you like – for example, you can try this:

    #primary {
    
margin-top: 20px !important;
    
}

    Let me know how it goes.

    October 8, 2013 at 4:39 am #141321

    Michael Roberts
    Member

    Super thanks. These worked. btw. where are all these codes? Is there a list somewhere, then I can change them myself?

    October 8, 2013 at 2:35 pm #141327

    Kathryn P.
    Happiness Engineer

    Great, glad this CSS did the trick.

    where are all these codes? Is there a list somewhere, then I can change them myself?

    This post I mentioned above will show you how to find the theme’s existing CSS:

    https://dailypost.wordpress.com/2013/07/25/css-selectors/

    In conjunction with the techniques discussed there, you can also explore the Web Developer Toolbar, which has some good CSS tools.

    I’m closing this thread and marking it as resolved, but feel free to start a new one if you need help with anything else.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Limiting white space’ is closed to new replies.