Return to Support

decreasing spacing around and between widgets

Home Forums Graphene WordPress theme Support decreasing spacing around and between widgets

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #9326
    esiebert7625
    Member

    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

    #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.

    #43367
    esiebert7625
    Member

    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

    #43368
    esiebert7625
    Member

    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!

    #43369
    Sharon
    Member

    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

    #43370
    esiebert7625
    Member

    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.