post thumbnail "jump" to the header

Question

I'm writing a plugin to display recent posts, however, can't figure out why the thumbnail is not inside the div and "jump" to the header of the page. This is the code from the plugin:

$my_query = new WP_Query( array(
    'post_type' => 'post',
    'posts_per_page' => 5
  ));

  if( $my_query->have_posts() ) : while( $my_query->have_posts() ) : $my_query->the_post();

        $html .="<div class=\"My-container\">";
        $html .="<div class=\"My-item\">" . the_post_thumbnail('thumbnail', array('class' => 'My-postImg')) . "</div>";
        $html .="<div class=\"My-item-1\">";
        $html .= "<p>" . the_category(', ') . " | " . the_time('M. d') . "</p>";
        $html .= "<h2>" . get_the_title() . " </h2>";
        $html .= "<p>" . the_category(', ') . "</p>";
        $html .= "<a href=\"" . get_permalink() . "\" class=\"button\">Read more</a>";
        $html .="</div>";

    endwhile; endif;


 $content .= $html;;       
 return $content;

another question: I try to display the recent posts at the end of the post. Therefore I have to return the $content after I add it to the $html. Is there cleaner / more efficient way to do this?

Thanks

To understand why the thumbnail is not inside the div we need to see the css applied to it and the 'My-container'. To decide where to put the $html concatenate it before or after $content. before: return $html.$content - after: return $content.$html — user5676176

Menahem Gil Menahem Gil · Accepted Answer · 2017-06-25T15:46:02

thanks for your help. Here's the CSS. Just before, here's the thing: if I put for example just text

or , etc. then it will display correctly inside the . Only when it comes to the thumbnail it "jumps".

The .My-container is just a standard flex box

    @charset "utf-8";
/* CSS Document */


.My-container {

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-flow: row nowrap;

  flex-direction: row;
  flex-wrap: nowrap;
}

.My-item {
    min-width: 300px;
    min-height: 300px;
    background-color: orange;
    display: block;

}

.My-item-1 {
    width: 200px;
    height: 100px;
    background-color: green;
}

post thumbnail "jump" to the header

1 Answers