shrink vertical white space in sidebar

It would be helpful if you indicated what theme you are talking about. It’s only because I saw your previous posts that I know you are referring to the 2012 theme.

So many people hate the giant white spaces in the WP themes I’m surprised they don’t just code these out by default!

Actually, that is rarely raised as an issue here. Were you aware that, if you don’t like the theme, there are over 1,500 other free themes to choose from?

As it stands, you should never 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 you need to create a child theme for your changes. Or install a custom CSS plugin.

In your Child Theme stylesheet or Custom CSS Manager plugin, add this;

.widget-area .widget li {
 line-height: 0;
}

Hi Esmi,
Thanks. I do see a lot of questions about how to get rid of white space; perhaps because I’m trying to do it myself! I have looked at a lot of themes and I do love Twenty Twelve best (except for the long vertical white spaces).
I have a child theme in place; I never touch the Twenty Twelve default files – that’s one of the first things I learned and took to heart.
I’ve only just entered the labyrinth of trying to figure out how to do CSS and php stuff. Generally people’s posts contain code that I can copy, add my specs to and paste, then test in the child theme.
Pressure is on to get content out there so my sites earn income to be able to support themselves, including the extremely time-consuming task of sitting here all day learning (which I love!). Otherwise I’d just hire people for the complicated stuff; impossible at present.

And hi Andrew, I’ll try your bit of code and see how I go. Thanks!

Andrew, just checking before I do what you’ve suggested…..
In my child style.css I found the relevant spot.
It has:
.widget-area {
margin: 24px 0 0;
margin: 1.714285714rem 0 0;
}
Do I delete this and replace with your code, or add your code after/before my default code?

Hi Diana – This is a good CSS reference site:

https://www.w3schools.com/css/

I’d also highly recommend using Firebug if you are not already doing so – for CSS work, in particular, it’s very helpful.

https://getfirebug.com

You should not have any “default” code in the child theme – it should only contain changes you are making.

WPyogi, I added Firebug, but at the moment CSS looks like a totally foreign language to me. As is PHP, just learning a bit of html, know nothing about Javascript……
It’s like: “go learn Russian, Sanskrit, Polynesian and Latin before lunch time tomorrow”!
I’m slowly creeping along, downloading a clean copy of whatever file I have to make changes to, saving it in a special folder on my desktop so I don’t get confused, pasting/typing in changes, uploading it to child theme, checking if the website’s gone belly-up, if so, replacing the original file that worked and retreating to where I got to before…. waiting on forums for someone wiser than me to help….. then creeping forward with the next little bit….documenting everything so I can retrace my steps when I have to…. and help some other newbie who runs into the same issue……and do it again with website #2.
Today’s challenge is shrinking that whitespace, and a few other basics….
Meanwhile I’ve put your w3schools webpage in my bookmarks in a new folder called “Coding School” and will drop in for lessons as often as I can! Thanks for caring.

Sounds like you are doing all the right things :). It’s a lot to learn at first. The great thing about Firebug is that you can test changes to the CSS code in your browser – so that makes it much easier to try things before actually changing the code on your site.

Ah, that’s cool! I will try it…..

Well, I tried to try it! The contents of my child style.css bears absolutely no resemblance to what comes in Firebug under CSS for my homepage – that has lots of stuff that starts with #wpadminbar. Can’t see anything about widgets. Put it as a search term in the box but nothing comes up. Stuck now. Dunno where to go from here….

OK I tried a different tack and GOT IT! Opened a copy of child style.css and make a Text Edit copy of it as a kind of guidesheet to my experiments – went through and changed the font colour on different sections so I can find things quickly, bolded and coloured any changes I made and put a note of what it was before. Then go make the changes in the test style.css, upload and see what happens. I discovered that if I go to the section /* Sidebar */ and in the first “paragraph” change margin-bottom 3.428571429rem to 0.6rem, I get a nice, sensible reduction in vertical white space between the widget elements!
My site, so you can see it:
https://www.diannetrussell.com

Now just got to figure out how to make the accordion function of Standard Widget Extensions plugin work in my text widgets and I’ll be so happy I’ll take some time off to go for a walk on the beach!

That’s great – however, be aware that you are not using a child theme. Changing the name on twentytwelve really is not ideal because you won’t be able to update the theme – and it’s possible there may be changes that are important…

I AM using a child theme. That’s where I’m doing all my changes.

Looks like you’ve duplicated all of the CSS…

https://diannetrussell.com/wp-content/themes/twentytwelve-child/style.css

You’ve the template tag there (child theme) but copying the CSS wholesale like that makes it really tough to figure out what/where you’ve made changes.

Have you considered using a basic style.css like this one?

/*
Theme Name: Twenty Twelve Child Theme
Author: Self-Help WordPress User
Template: twentytwelve
*/

@import url("../twentytwelve/style.css");

/* Your CSS changes goes after here */

It will make figuring it out easier IMHO.

So do you mean that the child style.css just has the stuff I change and nothing else? So WordPress knows to go back and forth between TwentyTwelve and TwentyTwelve-child to get what it needs?
And excuse my ignorance, but what’s IMHO?
thanks Jan