Home widget padding uneven

Please see this post for Jetpack subscription. Recent post (plugin) I would say is embedding their own styles and that’s virtually impossible to override:

<h3 style="clear:none;"><a style="text-decoration:none;" href="https://www.forummagistrorum.com/wpb/2012/12/henry-v/">Henry V</a></h3>

and

<div style="padding:5px 0;"><span style="text-align:right;">on December 10, 2012</span></div>

Please try another plugin that doesn’t do this ??

Thanks,
Emil

Dear Emil,

You were absolutely right about about the Featured Category plugin used for Recent Posts applying its own CSS. I tried another plug-in and it doesn’t do that. Thanks!

As for Jetpack, I added the 3 blocks of CSS at the link you mentioned and that didn’t solve the problem. What did make a slight difference was adding

.jetpack_subscription_widget h3 {
    padding-bottom: 0;
}

The Jetpack gaps were still pretty large, but both gaps seemed to be the same size with that. Is there anything else I should try?

Thanks again!
Ivy

Hi Ivy,

Please try reducing the height and the line-height of widget-title as well or even add here .jetpack_subscription_widget h3

Emil

Dear Emil,

Thanks for the line-height suggestion! I think I’ve got it worked out so that it looks good, but only in the home page widget. In the main sidebar, there’s still a big space below the widget title. Below is the CSS I used, but my CSS knowledge is very limited and there is probably a much better way to do it.

Ivy

.widget-title,
{
	padding: 0;
}

.jetpack_subscription_widget h3 {
    padding: 3px 0 0 0;
    line-height: 14px;
}

.jetpack_subscription_widget p {
    padding: 0 0 6px 9px;
    line-height: 24px;
}

Site-wide:

.widget-title {}

Home Only:

.widget-title-home h3 {}

You can also add .widget-wrapper {} in front as well.

Emil

Sorry, I had a mistake in the code above. I had had a comma in

.widget-title
{
	padding: 0;
}

With the comma removed, it applied the zero padding to all the widgets in the sidebar, so Jetpack looked OK, but then everything else had too little space. I’m sorry but I can’t figure out how to make this apply to just Jetpack and not to every widget.

Sorry to keep on about this.

Like this:

.jetpack_subscription_widget .widget-title {}

or general

.widget-wrapper .jetpack_subscription_widget {}

Thanks,
Emil

Sorry for the delay in replying. With your generous help, I think I’ve cobbled together something that looks OK. For the record, this is my custom css for widgets now

.widget-title {
	font-size: 18px;
}

.jetpack_subscription_widget h3 {
    padding: 0 0 18px 0px;
    line-height: 18px;
}

.jetpack_subscription_widget p{
    padding: 0 0 12px 3px;
    line-height: 24px;
}

that is ok and I am glad that you sorted this out

Emil