Support » Theme: Responsive » Home widget padding uneven

  • Resolved lin2ai4

    (@lin2ai4)


    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)
  • Emil Uzelac

    (@emiluzelac)

    Theme Review Admin

    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

    Emil Uzelac

    (@emiluzelac)

    Theme Review Admin

    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;
    }
    Emil Uzelac

    (@emiluzelac)

    Theme Review Admin

    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.

    Emil Uzelac

    (@emiluzelac)

    Theme Review Admin

    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;
    }
    Emil Uzelac

    (@emiluzelac)

    Theme Review Admin

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

    Emil

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