Reduce Widget Margins in Twenty Twelve Theme

The default WordPress Twenty Twelve theme has—what I consider—a large space following a widget’s title and a large space between widgets. The screenshots below show this spacing using Chrome’s inspect element feature. The blue shading represents the content area, and the orange represents the margin. We can modify the theme’s style to reduce this space.

The margins below a widget's title (left) and that between widgets (right) are shown in orange.

The margins below a widget's title (left) and that between widgets (right) are shown in orange.

When modifying WordPress themes, you should always create a child theme. Follow the instructions here on the WordPress Codex to do this.1 If you do not, then any update to the theme will erase the changes you make.

In order to adjust the margins, add the following lines to your child theme’s style.css file.

.widget-area .widget { margin-bottom: 24px; margin-bottom: 1.7142857145rem; }
.widget-area .widget h3 { margin-bottom: 0px; }

The first line reduces the space between widgets by one half. We include two different measurements because some browsers do not support the relative em unit. Those browsers will use the absolute spacing given in pixels instead. The second line will remove the spacing between a widet’s title and content. Feel free to change these numbers as you see fit.

15 thoughts on “Reduce Widget Margins in Twenty Twelve Theme

  1. tammy

    Hello, I have been searching high and low as how to decrease the space between my sidebar widget titles and the graphics, but have not been able to do so. I am new to all of this and am not sure if I am trying to make the changes in the wrong place? If you have a minute would you mind taking a peek for me? Any help would be so so appreciated.

    blog.clothandpatina.com
    "twenty twelve" theme.

    Thank you!!!!!!

    Reply
    1. John Bruer Post author

      It looks like you're making changes in the right place. Which spacing in particular are you trying to reduce? It would be possible, for instance, to make the pictures from Pintrest and the "Pintrest" graphic closer together, but I'm not sure if this is an example of what you mean.

      Reply
      1. tammy

        Thank you so much for getting back to me! I am literally going nuts trying to figure this all out. Yes, especially would like to try and reduce the space between "my latest pins, the six pics, & the pinterest graphic". Then if possible would I be able to decrease some of the spacing between the widgets themselves? It seems that there is so much white space?

        Thank you!!!!!
        Tammy

        Reply
        1. John Bruer Post author

          You could reduce the margin at the bottom of the widgets further by changing this line:

          .widget-area .widget { margin-bottom: 24px; margin-bottom: 1.7142857145rem; }

          to:

          .widget-area .widget { margin-bottom: 12px; margin-bottom: 0.85714285725rem; }

          If you find that the spacing between the widget titles and the links are still too large for your liking, you can also add:

          .widget-title { line-height: 1.5; }

          This is basically like setting 1.5 line spacing in Microsoft Word. The default for this theme is a little bit larger than double spacing.

          To get the Pintrest logo closer, you can add:

          ul.pins-feed-list { margin-bottom: -12px !important; }

          To get the Pintrest pictures closer together you can use:

          li.pins-feed-item { margin: 2px !important; height: 100px !important; }

          Modify the margin number to change the spacing between photos (default is 5px). Feel free to change any of these numbers to suit your taste.

          Hope this helps!

          Reply
          1. tammy

            Thank you so much for helping out! I am going to try this right now. I'm not sure though if I should change this in the Twenty Twelve style.css or the Child Theme?

            I will let you know how it turns out...thank you again for everything!
            Tammy

          2. tammy

            Thank you. I have tried adding in the css that you gave, but think I am doing something wrong or adding it in the wrong spot? Im not seeing any changes? This is all so new to me : )

          3. tammy

            I was able to move the pinterest graphic up, but it also moved up the search a bit too close. Still haven't figured out how to decrease the space between the my latest pins and the pics. Working on that one now.

          4. John Bruer Post author

            You can change your .widget-title line to:

            .widget-title { margin-bottom: 0px; line-height: 1.5;}

            This will get rid of the large space between the widget titles and links. To give more space before the search box, you can add:

            .widget_search { margin-top: 24px; }

            Again, feel free to adjust any of the numbers.

  2. Elly

    Thanks so much for sharing this info! I have one question that I cannot find the answer to ANYWHERE, have been looking literally for hours, and I wondered if you might know the answer. I'm trying to decrease the line height of the body text in my text widgets on the Twenty Twelve (child) theme. The text is the correct size, but the vertical spacing is way too big:
    http://66.147.242.170/~caribbq4/1234/

    Any ideas?! Thanks so much in advance, really appreciate it.
    Elly

    Reply
    1. John Bruer Post author

      In your child style sheet, replace the .widget-area definition on line 51 with:

      .widget-area .widget p,
      .widget-area .widget li,
      .widget-area .widget .textwidget {
      font-family: "anisette-petite";
      font-size: 15px;
      color: #000;
      line-height: 1.2;
      }

      This will actually increase the font size to 15px as it appears that your computed style was actually using 13px. You can just change this value to 13px to keep the size as it is now. The line-height property can be set in several ways. Here, 1.2 (without units) just defines a multiple of the font size.

      Hope this helps!

      -John

      Reply
  3. Wayan Adika

    Thanks, that's was great tutorial with sample picture, I also start new project using twenty twelve as a parent theme. One thing I want to change is the navigation menu on mobile view, I like to changed to bootstrap menu, I search on the Internet but didn't find the solution, perhaps you have any idea for I implemented to my child theme twenty twelve.
    Regards
    Wayan Adika

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *