Support » Theme: Twenty Thirteen » Decrease margin between posts

  • I’m trying to decrease the space between the posts on the first page.
    There is “huge” amount of empty space before next post appears.
    How do i decrease it?

    If there’s a solution to change the setting on the different categories that would be the best since I’d like to make different adjustments on different categories.

    Thank you for your help!

    Nils

Viewing 10 replies - 1 through 10 (of 10 total)
  • Sorry, I meant formats, I’d like to adjust the space on different formats.

    N

    esmi

    (@esmi)

    Forum Moderator

    Do not edit the Twenty Thirteen theme. It is the current default WordPress theme and having access to an original, unedited, copy of the theme is vital in many situations. First create a child theme for your changes. Or install a custom CSS plugin.

    ringmar, can you please post a link to your site? It is always easier to offer suggestions when we can examine the site directly.

    hi!

    http://www.djurdansen.com

    @esmi. How do I convert my changed parent theme into a child theme?

    Thanks!

    Nils

    How do I convert my changed parent theme into a child theme?

    I believe that you would first create your child theme and then copy over any files which you’ve changed from the parent theme into the child theme’s folder. esmi will correct me if I’m wrong. And then you would activate your child theme.

    To change the spacing between sections (actually, between posts), you just change the padding property for the hentry class. Currently, the rule is this:

    .hentry {
    	padding: 40px 0;
    }

    Which means 40px padding on the top and bottom (and no padding on the left & right). You can make the padding smaller by adding a rule like this to the end of your child theme’s style.css file, or by using a CSS plugin:

    .hentry {
    	padding: 20px 0px;
    }

    This would give you padding on the top & bottom of 20px. Adjust the value the way you want.

    I believe that you would first create your child theme and then copy over any files which you’ve changed from the parent theme into the child theme’s folder.

    That applies to .php files EXCEPT functions.php.

    The style.css file in the child theme should contain ONLY changes – not a copy of the entire file from the parent theme. You can use a file comparison program to find the changes you’ve made.

    Thanks for the correction, WPyogi, I should have remembered about style.css & functions.php.

    Hi!
    It works like a charm! Thank you so much.
    No when I’ve done a child theme of it (feels much more secure) The only thing that’s changed is that the background is not 100% in width, and it was before. It like it to fill out to the width of the screen.

    Another problem I’ve experienced is that if I have a header picture with a background color I can’t change the background color of the header area all the way out. Only the recommended header width.

    I’m so glad for you’re help so far!

    /Nils

    Here is my css.

    /**
    * 3.0 Basic Structure
    * —————————————————————————-
    */

    .site {
    background-color: #ffffff;
    border-left: 0px solid #0096db;
    border-right: 0px solid #0096db;
    margin: 0 auto;
    width: 100%;
    }

    .site-main {
    position: relative;
    }

    .site-main .sidebar-container {
    height: 0;
    position: absolute;
    top: 40px;.site {
    background-color: #ffffff;
    border-left: 0px solid #0096db;
    border-right: 0px solid #0096db;
    margin: 0 auto;
    width: 100%;
    }

    .site-main {
    position: relative;
    }

    .site-main .sidebar-container {
    height: 0;
    position: absolute;
    top: 40px;
    z-index: 1;
    }

    .site-main .sidebar-inner {
    margin: 0 auto;
    }navbar
    z-index: 1;
    }

    .site-main .sidebar-inner {
    margin: 0 auto;
    }

    /**
    * 4.0 Header
    * —————————————————————————-
    */

    /**
    * 4.1 Site Header
    * —————————————————————————-
    */

    .site-header {
    position: relative;
    background-color: #0096db;
    }

    .site-header .home-link {
    color: #0096db;
    display: block;
    margin: 0 auto;
    max-width: 100%;
    min-height: 230px;
    padding: 0 20px;
    text-decoration: none;
    width: 100%;

    }

    .site-header .site-title:hover {
    text-decoration: underline;
    }

    .site-title {
    font-size: 60px;
    font-weight: bold;
    line-height: 1;
    margin: 0;
    padding: 58px 0 10px;
    }

    .site-description {
    font: 24px “Source Sans Pro”, Helvetica, sans-serif;
    margin: 0;
    }

    now it works… Strange. But the width on the menu is still not wide enough.

    Thank you for your help!

    N

    But the width on the menu is still not wide enough.

    What exactly do you mean by not wide enough? All of the menu items appear at the top in a row. Do you want to space the menu items more evenly across the width?

    Try adding this CSS to the end of your child theme’s style.css file:

    ul.nav-menu {
    	padding: 0;
    }
    .nav-menu li {
    	width: 19%;
    }

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Decrease margin between posts’ is closed to new replies.