Reduce space between two widgets only

[noah]

I want to remove the space between my first and second widget, but without affecting the rest.

The space is between the third and fourth widget on http://www.leaseholdknowledge.com: i.e. between the text widget "What is LKP?" and the "Find Everything Here" image-to-archive page widget.

I only need the space removed here.

This removed space from other widgets:

`.sidebar .widget {
background-color: #cfd6cf;
padding-bottom: 0rem;
padding-left: 2rem;
padding-right: 2rem;
padding-top: 2rem;

http://www.leaseholdknowledge.com

[jbergen]

Hi,

Each widget has a unique ID, so you can just add a new CSS rule that will point specifically to that widget. In your case, you can reduce the padding below the "What is LKP?" text widget with the following rule:

#text-11.widget {
    padding-bottom: 0;
}

I hope that helps!
Jamie

---

Jamie @ Ladebug Studios

[noah]

Thanks for that, but it isn't working.

I tried this

#text-11.widget {
   padding-bottom: 0;
}

But also need to remove padding-bottom from #featured-page-8.widget, and the rule.

Any thoughts?

[jbergen]

I looked again, and when I added the following rule to style.css, the space was reduced below the "What is LKP?" widget. Do you want to remove more space?

#text-11.widget {
   padding-bottom: 0;
}

To reduce the space below the "Find Everything Here" widget, I would add this rule to style.css:

#featured-page-8.widget {
	padding-bottom: 0;
}

I'm not sure why that didn't work for you, but let me know if the issue is that you want to remove more space. Also, I would recommend adding any custom CSS in a separate CSS file rather than style.css so that you don't lose your customizations when you update your theme.

Jamie

---

Jamie @ Ladebug Studios

[noah]

It is not having any appreciable effect when I add this to the bottom of the style.css file :

#text-11.widget {
   padding-bottom: 0;
}

#featured-page-8.widget { 
padding-bottom: 0;
}

(I am not sure why I would want to create another style.css file – a third? Isn't making backup copies of the News Pro child theme files sufficient?)

[jbergen]

I'm not sure how to help because those CSS rules did reduce the space below the widgets you specified when I tried it with my developer tools. If you want to reduce the space some more, you can add:

#featured-page-8 {
    padding-top: 0;
}

Also, here's a nice explanation of why you might want to add your custom CSS to a separate file. It's not required; it just makes it so that you don't lose your customizations if you update/replace your theme.

Jamie

---

Jamie @ Ladebug Studios

[noah]

Thanks, but I just cannot get any of these to work on a browser of mine.

I will just have to use other widgets – featured page not a text widget – which might not add so much space.

[noah]

I followed Matt's advice in the link above and placed this in the Header and Footer Scripts.

But where do you actually edit the css? Immediately below? In the file itself via cPanel? FTP? It does not appear in the Editor drop down menu along with the other css files.

<link rel='stylesheet' type='text/css' href='http://www.leaseholdknowledge.com/wp-content/themes/news-pro/NewsProchild.css' media="all" />

[jbergen]

If you can't see the new file in your Editor drop down menu, my guess is that you'll have to edit the file itself and transfer by FTP. You can also follow up with Matt on his blog.

Jamie

---

Jamie @ Ladebug Studios

[noah]

The problem is that I am using W3 Total Cache and Amazon Cloudfront.

As a result, edits to CSS don't show. Anyone had the same problem?

[Author]

Posts