Support » Themes and Templates » Reducing whitespace between widgets

  • Resolved Lesley Ward


    How do I reduce the whitespace between my right sidebar widgets?
    I’ve seen various posts referring to the .css stylesheet and looking for the bottom border of the sidebar widget but I can’t find anything like this in my stylesheet.
    My website is

    Thank you!

Viewing 15 replies - 1 through 15 (of 21 total)
  • Line 613 of your style.css:

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

    Delete margin-bottom.

    Hi Lesley

    I’ve just had a quick look at your site and it looks like the following css code will do the trick. Well it did for me when using Chrome’s Inspect Element function.

    .widget-area .widget .textwidget {
    margin-top: -1rem;

    To make the change permanent, I would suggest you look to see if the theme allows for an easy way to customize it. If not you may have to make a child theme and do it that way.

    If you are not sure first check the Appearance=>Customize Theme option or if you need to use a child theme check out this article

    I hope this helps.
    Dave Foston

    Hi Dave

    I’ve added the code you suggest to the css stylesheet under Appearance > Editor but it hasn’t made any difference. is that where I should have added it?


    From what I can see, I think my theme is already a child theme. It’s got the word ‘child’ in the name in the directory.

    #secondary .widget-area .widget {
    margin-bottom: 24px;

    You can adjust that number as needed.

    Note: This does not effect the widgets on the left, only the right.

    Hi Lesley

    Some themes allow you to make adjustments through the admin user interface; hence the Appearance etc suggestion. I’ve had another look at your site and yes it is using a child theme of the twentytwelve theme from WordPress. That is even better. Just find the style.css file within the child theme and add the code I gave you earlier to this file.

    The -1rem moves the widget up. The .widget-area .widget .textwidget means it does it for all widgets wherever they appear.

    Is that what you would like?


    I’ve tried adding both your code at the bottom of my style.css with no success. Am I putting it in the wrong place?

    Red Deer

    I think that’s in my parent rather than my child style.css. When I change it in the parent it doesn’t make any difference.

    Am I being very stupid and not understanding the help you’re all giving?

    what you put in your child theme should override what’s in the parent theme. You shouldn’t make any changes to the parent theme.

    Try copying this into your child theme style.css file:

    #secondary .widget-area .widget {
         webkit-hyphens: auto;
         -moz-hyphens: auto;
         hyphens: auto;
         margin-bottom: 0;
         word-wrap: break-word;

    Is it possible to get some help from one of you guys on a background issue ? Thanks

    what’s the background issue?

    the background issue is with theme: nictitate I’m very lost and its been several days with the same issue and no one will assist me. Thank you.

    oh my gosh that was fast,
    i upload the background set everything how the theme indicates and it does not appear

    @jadams1974: oh, you need to start your own thread. I thought you were the same person.

    And make sure to include a link to your site or we can’t help you.

    no, i started a several threads and nobody responds
    bad week for me with this issue

    Hi Janet

    I’ve copied that code to the bottom of my child theme style.css file but still no difference?

Viewing 15 replies - 1 through 15 (of 21 total)
  • The topic ‘Reducing whitespace between widgets’ is closed to new replies.