Align Preview Images to Left of Excerpt and Title (5 posts)

  1. JLDV
    Posted 3 years ago #

    I'm using the Pinboard theme, whose default blog style is to have the preview image appear on top of the excerpt, full-width (even if it means expanding the image to fit). I'd like to set it instead to 110px wide (the images' real size) and to the left of the text, something like: http://blog.getaway.co.za/

    I managed to reduce the image display size using the following on the child-theme's css, so that problem is solved:

    .wp-post-image {
    	float: left;
    	width: auto;

    As you can see, I also included float:left but it has no effect on the preview image's position.

    I tried using this but I couldn't follow it:


    Here's my blog page:


  2. bcworkz
    Posted 3 years ago #

    This may not be the right solution overall, but it looks OK on the page you linked.

    .entry-thumbnail {
        left: 20%;
        position: absolute;
        width: 15%;

    I actually added this to the rules starting on line 1439 of style.css, of which entry-thumbnail is one of many classes listed. In my browser's local copy of course. This makes the article blocks too far apart though. You have some absolute positioning in each article tag that needs to be revised to fix that aspect.

    The support topic you linked was advocating adding align="left" to the <img> tag, but that is a depreciated attribute now, and it would not work in your case because the thumbnail container is the problem, not the image itself. The image is doing what it's supposed to do within the constraints of it's container.

  3. JLDV
    Posted 3 years ago #

    Thank you so much, bcworkz, this works great. I tried removing position:absolute from the tags but that makes the articles overlap each other. Any idea how I could go about solving that?

  4. bcworkz
    Posted 3 years ago #

    I see you figured out you needed to remove the pixel spacing parameters as well. I should have been more explicit, sorry for an confusion. Glad it's sorted. Cheers.

  5. JLDV
    Posted 3 years ago #

    If I change the top margin in the html for each entry I can reduce the spacing between them but I can't figure out how to do it automatically using css.

    So here, I'd change 288px to, say, 266px, but the next entry has a different number of pixels, and so on for each.

    <article id="post-834" class="post-834 post type-post status-publish format-standard hentry category-uncategorized column onecol has-thumbnail masonry-brick" style="position: absolute; top: 288px; left: 0px;">

Topic Closed

This topic has been closed to new replies.

About this Topic