Spacing on sidebar for Twenty Twelve

Hello, my name is Chelsie McFall and I need to decrease the spacing between the widgets on the sidebar [in Twenty Twelve Theme] as the current spacing is huge. My website is gpsdenver.org. I have no code experience, an experienced website builder started the building of my site for me and bailed in the middle and I am just trying to figure this all out on my own [through google and forums]. Please be very specific in your explanation. Thank you all so much, ANY help would be greatly appreciated.

You will need FTP for this.
Are you setup with FTP?

Hi Chelsie. You are brave!

The spacing between the widgets in the sidebar of your site looks like it’s set in /wp-content/themes/responsive/style.css on line 1442 using the following CSS:
margin: 0 0 20px;
The margin setting in CSS is a shortcut for specific margin settings. The first setting is the top margin, the second the right, and the third (the 20px) is the bottom. You can set the 20px to any setting you like.

The easiest way to change it is to log in to the administrative side (back end) of WordPress, then go Appearance -> Editor, then click on style.css in the right column. Scroll down until you find the section for the class “widget-wrapper,” which should look like this:

.widget-wrapper {
    background-color: #F9F9F9;
    border: 1px solid #D6D6D6;
    border-radius: 6px 6px 6px 6px;
    font-size: 13px;
    margin: 0 0 20px;
    padding: 15px;
}

(In CSS, anything with a period in front of it is a class.)

Make your changes there, then click “Update File.” Say you wanted to set the bottom margin to 5px. You would change it so it looks like this:

.widget-wrapper {
    background-color: #F9F9F9;
    border: 1px solid #D6D6D6;
    border-radius: 6px 6px 6px 6px;
    font-size: 13px;
    margin: 0 0 5px;
    padding: 15px;
}

You can experiment with various settings by refreshing (reloading) your site, going back and forth between the administrative side and your site, until you get the look you want.

You may also want to play with the “padding” setting in the same class to see what it does and adjust accordingly.

Do not edit the Twenty Twelve theme. It is the default WordPress theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. First create a child theme for your changes. Or use a custom CSS plugin.

Open up the themes style.css and find the segment:

.widget-area .widget{-webkit-hyphens:auto;-moz-hyphens:auto;hyphens:auto;margin-bottom:48px;margin-bottom:3.428571429rem;

and mess around with the margin bottom parameters to adjust the margin between each widget area.

You can also modify

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

to modify the distance under each widget title (it is quite a large distance)

I would use

.widget-area .widget{-webkit-hyphens:auto;-moz-hyphens:auto;hyphens:auto;margin-bottom:20px;

and

.widget-area .widget h3{margin-bottom:10px;

@esmi:

I think she’s already working with a child theme based on the file path being to “responsive” rather than “twentytwelve.”

Hello everyone and thank you all for responding, while I awaited your responses I was testing some other themes to see if I could find better spacing [to no avai]. Thank you all for the instructions, I am going to see which theme works best and play with the margins and font size.

Happy Holidays and Thanks again!

.widget-area .widget h3{margin-bottom:10px;

Changed 10 to 4 on my site and it worked perfect. Thank you!