WordPress.org

Ready to get started?Download WordPress

Forums

Responsive
[resolved] Home widget padding uneven (10 posts)

  1. lin2ai4
    Member
    Posted 1 year ago #

    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

  2. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    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

  3. lin2ai4
    Member
    Posted 1 year ago #

    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

  4. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    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

  5. lin2ai4
    Member
    Posted 1 year ago #

    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;
    }
  6. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    Site-wide:

    .widget-title {}

    Home Only:

    .widget-title-home h3 {}

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

    Emil

  7. lin2ai4
    Member
    Posted 1 year ago #

    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.

  8. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    Like this:

    .jetpack_subscription_widget .widget-title {}

    or general

    .widget-wrapper .jetpack_subscription_widget {}

    Thanks,
    Emil

  9. lin2ai4
    Member
    Posted 1 year ago #

    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;
    }
  10. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

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

    Emil

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags