Title vertical alignment

  • Resolved morfe1

    (@morfe1)


    7 years, 10 months ago

    Hi, it’s me again.

    I’m tryign to display it in 2 columns with the images on the left and titles on the right.
    But because of the different length the titles are not always 100% aligned with the image. I’ve tried using padding but didn’t find a way to make if look nice with any posts. Most of them look good though.
    example

    https://hidemyage.staging.wpengine.com/infini-skin-tightening/

    Do you know if there’s a way to do so?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Aldo Latino

    (@aldolat)

    There are styles added in the PiS widget itself and in the WP Custom CSS plugin. It would be better to use only a place for them.

    Anyway, add these styles in WP Custom CSS:

    
#pis_posts_in_sidebar-3 li {
	margin-bottom: 10px;
	overflow: hidden;
}

#pis_posts_in_sidebar-3 .pis-thumbnail {
	margin-bottom: 0;
	height: auto;
}

    Then, in WP Custom CSS change this rules:

    from:

    
#pis_posts_in_sidebar-3 > ul > li:nth-child(1) > p.pis-title {
    padding-top: 10px;
    padding-bottom: 0px;
}

    into:

    #pis_posts_in_sidebar-3 > ul > li:nth-child(1) > p.pis-title {
    padding-top: 0px;
    padding-bottom: 0px;
}

    and from:

    #pis_posts_in_sidebar-3 > ul > li > p.pis-title {
    padding-top: 20px;
    padding-bottom: 10px;
    margin-bottom: 0px;
}

    into:

    
#pis_posts_in_sidebar-3 > ul > li > p.pis-title {
    padding-top: 0px;
    padding-bottom: 10px;
    margin-bottom: 0px;
}

    Also change this:

    from:

    img.pis-thumbnail-img.alignleft.wp-post-image {
    margin-bottom: 0;
    position: relative;
    width: 150px;
    height: 100px;
}

    into:

    
img.pis-thumbnail-img.alignleft.wp-post-image {
    margin-bottom: 0;
    position: relative;
    width: 150px;
    height: auto;
}

    In this way the titles will be perfectly aligned at top of the images.

    Thread Starter morfe1

    (@morfe1)

    Yes, I was trying to align them with the centerof the image but it seems to be no way to do that without parent div containers for each element. It works on the home page, where I’m pulling the exact 4 posts. But on the single posts it’s pulling different posts and I can’t apply same padding to all titles due to the differences in the length.

    Thanks for the overflow though, didn’t know about it.

    • This reply was modified 7 years, 10 months ago by morfe1.
    Plugin Author Aldo Latino

    (@aldolat)

    You have at least two active widgets of the plugin. So, please, follow these steps:

    1) Make a backup of your current CSS styles (just in case…). Take note that you have multiple places where you have entered styles for Posts in Sidebar, so search for them.

    2) Remove every CSS style for Posts in Sidebar, for example:

    
#pis_posts_in_sidebar-2 .pis-title { font-size: 18px !important; }

    and multiple others. You have styles either in the widget admin and in WP Custom CSS plugin.

    3) Paste this styles in a Posts in Sidebar widget or in your current theme’s styles.css file or in WP Custom CSS plugin:

    
#pis_posts_in_sidebar-2 ul.pis-ul,
#pis_posts_in_sidebar-3 ul.pis-ul {
    margin-top: 1em;
    margin-left: 1em;
    line-height: 1.2;
    list-style: none;
}

#pis_posts_in_sidebar-2 li,
#pis_posts_in_sidebar-3 li {
    margin-bottom: 10px;
    overflow: hidden;
    width: 315px;
    height: 105px;
    position: relative;
}

#pis_posts_in_sidebar-2 .pis-thumbnail,
#pis_posts_in_sidebar-3 .pis-thumbnail {
    margin-bottom: 0;
    height: auto;
    height: 105px;
    overflow: hidden;
    width: 150px;
    position: absolute;
}

#pis_posts_in_sidebar-2 p img.pis-thumbnail-img.alignleft.wp-post-image,
#pis_posts_in_sidebar-3 p img.pis-thumbnail-img.alignleft.wp-post-image {
    margin-bottom: 0;
    margin-top: 0px;
    max-width: 100%;
    height: auto;
    display: block;
}

#pis_posts_in_sidebar-2 > ul > li > p.pis-title,
#pis_posts_in_sidebar-3 > ul > li > p.pis-title {
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
    position: absolute;
    width: 157px;
    height: 105px;
    display: table;
    left: 157px;
}

#pis_posts_in_sidebar-2 a.pis-title-link,
#pis_posts_in_sidebar-3 a.pis-title-link {
    display: table-cell;
    vertical-align: middle;
}

    These styles, among other aspects, will center the text and the image.

    Let me know, please.

    Thread Starter morfe1

    (@morfe1)

    That’s awesome, thank you very much! Worked like a charm.

    Plugin Author Aldo Latino

    (@aldolat)

    You’re welcome! ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Title vertical alignment’ is closed to new replies.