decreasing spacing around and between widgets

  • esiebert7625

    #9326

    Tried searching on this but didn’t find anything that matched, was looking to decrease the vertical spacing around my right sidebar text widget boxes. Right now it looks like there is a line outside the widget box and between that and my image that is showing there is padded space that I want to reduce so the widgets that display ad images are closer together. Also is there a way to also reduce the vertical space between each widgets?

    Thanks!

    Eric

    Mod

    Kenneth John Odle

    #43366
    Quote:
    decrease the vertical spacing around my right sidebar text widget boxes.

    Add to custom CSS or child theme stylesheet:

    .sidebar div.sidebar-wrap {
    margin-bottom: 16px;
    }

    16px is the default value; change it to something smaller.

    Quote:
    Right now it looks like there is a line outside the widget box and between that and my image that is showing there is padded space that I want to reduce so the widgets that display ad images are closer together.

    I don’t see a line outside your widget box, images, or ads…..

    Quote:
    Also is there a way to also reduce the vertical space between each widgets?

    See above.

    esiebert7625

    #43367

    thanks! that seems to work to decrease the space between widgets, but if you look at my site here: http://vsphere-land.com/

    you’ll see the line and space around the widget graphic

    esiebert7625

    #43368

    Here’s a pic showing the space I want to reduce/get rid of so the images are more closer to each other

    [img] photo sidebar_zps77172397.png[/img]

    Thanks!

    Sharon

    #43369

    Hi Eric,

    Quote:
    Right now it looks like there is a line outside the widget box and between that and my image

    To get rid of the line try adding this to your child theme or Custom CSS:

    .sidebar div.sidebar-wrap {box-shadow: none;}

    Quote:
    Here’s a pic showing the space I want to reduce/get rid of so the images are more closer to each other

    To remove some of the space as per your image above, you need to reduce the padding. Padding refers to the space within an element so to reduce this, try using:

    .sidebar div.sidebar-wrap {padding: 12px 12px ;}

    The first 12px refers to the top & bottom padding, the second 12px refers to the left and right padding. Adjust the numbers as needed.

    W3 Schools has a useful tutorial on Padding. You can find that here.

    Hope that helps.

    Regards,

    Sharon

    esiebert7625

    #43370

    Thank you! That did it, kinda knew what needed to be done but wasn’t sure of the div object and setting to do it. I just combined it all into this custom CSS and it works.

    .sidebar div.sidebar-wrap {

    margin-bottom: 8px;

    box-shadow: none;

    padding: 2px 2px;

    }

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.