Change widgets height

  • Resolved michelbenita

    (@michelbenita)


    5 years, 2 months ago

    Hi, now I’d like to reduce the widgets’ height : I mean both the space between items inside the widgets and their overall height.

    Actually I can change the height using :

    .sidebar-primary .widget {
    height: xxxpx;
    }

    But don’t know how to change the line space inside (including between title and items)

    Last but not least : round corners ?

    Thanks !

    • This topic was modified 5 years, 2 months ago by michelbenita.
Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter michelbenita

    (@michelbenita)

    Edited my first message…

    • This reply was modified 5 years, 2 months ago by michelbenita.
    Theme Author Ben Sibley

    (@bensibley)

    I would refrain from using height since it could cause the contents inside the widget to be larger than the widget container which would make them overflow and look strange.

    The space inside can be edited with the padding property and that will make the widgets smaller. Here’s a snippet to greatly reduce the padding, and I’ve added the border-radius property in too which will round the corners:

    .sidebar-primary .widget {
  padding: 6px;
  border-radius: 6px;
}
    • This reply was modified 5 years, 2 months ago by Ben Sibley.
    Thread Starter michelbenita

    (@michelbenita)

    I found the border-radius property for rounded corners, so that’s one thing already ??

    Thread Starter michelbenita

    (@michelbenita)

    Thanks Ben, will try it when home and adjust if necessary.

    Thread Starter michelbenita

    (@michelbenita)

    Actually your solution makes the widget narrower and the text reaches the very edges. This is not what I’m looking for, as I just want it to take less space in height, not width.

    Theme Author Ben Sibley

    (@bensibley)

    Ah okay I get it now. Please try this CSS instead:

    .sidebar-primary .widget li {
  padding: 6px 0;
}

    That’s going to reduce the space between list items and reduce the height of the widgets.

    Thread Starter michelbenita

    (@michelbenita)

    Thanks ! Perfect.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Change widgets height’ is closed to new replies.