WordPress.org

1. Showgirl
   Member
   Posted 2 years ago #

   Hello

   I need to add some space between my widgets as they're all close together. I've had to add empty widgets to add more space. I have played around with margins, padding and borders to no avail so can someone tell me what's wrong. The site is http://www.urbanspirit.co.uk.

   Thanks

2. cogmios
   Member
   Posted 2 years ago #

   You dont need to add empty widgets. You can add to the before widget and after widget a div and just css the div. e.g. see: http://www.cogmios.nl/index.php?s=widgets

3. Otto42
   Moderator
   Posted 2 years ago #

   He doesn't even need to do that.

   Add these to the CSS:

   .sidebar ul li {
   padding-bottom: 20px !important;
   }
   .sidebar ul li ul li{
   padding: 0px !important;
   }

   Adjust the 20px to whatever size you want. And eliminate the empty widgets you were using.

   Also, when playing with CSS, I highly recommend using Firefox and the Web Developer Addon. It will let you change the CSS contents of any page on the fly, and see what the results look like immediately. No need to change and reload over and over, just mess with it until you get it, and then copy and paste your results. Much simpler.

4. Root
   Member
   Posted 2 years ago #

   Why does everbody do this !important thingy ?:)

   Once it began - everybody is at it.
   Its a complete misuse of the CSS.
   IMHO.
   Led by Kubrick of course. :)

5. Otto42
   Moderator
   Posted 2 years ago #

   In this particular case, !important happened to be required. Try it without it, no worky. Okay, so I could have dived further into the CSS and figure out why, but you know, screw that. :-P

6. kmessinger
   Member
   Posted 2 years ago #

   For me to accomplish this I changed the stye.css.

   Original
   

   #sidebar ul li {
   	list-style-type: none;
   	list-style-image: none;
   	margin-bottom: 15px;
   	}

   New
   

   #sidebar ul li {
   	list-style-type: none;
   	list-style-image: none;
   	padding-bottom: 100px;
   	margin-bottom: 15px;
   	}

   I am not an expert on css but so far have seen no ill effects.

7. Showgirl
   Member
   Posted 2 years ago #

   Thanks everyone, Otto your suggestion worked so thanks a lot. I've now got the widgets spaced out but there are still 2 spacing issues I am unsure of.

   1. The 1st widget is over the header logo, how do I bring that down and make it start at a more neater place?

   2. The widget containing "Free workshop" is very spaced out indeed, how do I bring the boxes up closer to the writing.

   Site again is http://www.urbanspirit.co.uk

Topic Closed

This topic has been closed to new replies.