WordPress.org

Support

Support » Themes and Templates » Responsive » [Resolved] Home widget padding uneven

[Resolved] Home widget padding uneven

  • I’m having a problem with uneven padding in the home widgets. This image shows that there is a different amount of space under the widget title in each of the home widgets.

    http://www.forummagistrorum.com/wpb/wp-content/uploads/2012/12/HomeWidgetIssue.png

    I found some posts on spacing issues and tried adjusting this css so that the padding was 0 all around.

    .widget-title,
    .widget-title-home h3 {
    	display: block;
    	font-size: 24px;
    	font-weight: 700;
    	line-height: 23px;
    	margin: 0;
    	padding: 0 0 20px 0;
    	text-align: left;

    While this made the “Recent Posts” and “RSS” widgets look OK (some space remained between the title and content), the “Recent Discussion” and “Meta” ones ended up with no space between the title and content. Since “Recent Discussion” and “Meta” are both ul, should I add padding before a ul in a widget somehow?

    And the “E-mail” one still had a huge space that looked the same. Can anything be done about that?

    Thank you,
    Ivy

Viewing 9 replies - 1 through 9 (of 9 total)
  • 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="http://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

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘[Resolved] Home widget padding uneven’ is closed to new replies.
Skip to toolbar