problems with loading posts in a table-row


I am trying to modify a code in a webpage.
Currently the page has a table, table-row, table-cell structure where thumbnails which represents posts of a specific category and associated data are loaded using a loop.
Until now we had 10 posts.
I recently added a new one but the shown thumbnails remain 10 and when inspecting the page only 10 posts out of 11 are loaded.
Here is the webpage
the posts are the small thumbnails below the render area.

the loop code is

<div class="object-selector">
<div class="object-selector-row">
<div class="object-cell-last"></div>
    $my_query = new WP_Query('cat=7'); // categoria 7 = objecte
    if ($my_query->have_posts()) {
        while ($my_query->have_posts()) { $my_query->the_post();
            <div id="f_<?php echo get_post_meta(get_the_ID(), "object_file", true); ?>" class="hidden-cell">
                <?php the_content(); ?>
            <div id="t_<?php echo get_post_meta(get_the_ID(), "object_file", true); ?>" class="hidden-cell">
                <?php the_title(); ?>
            <div id="i_<?php echo get_post_meta(get_the_ID(), "object_file", true); ?>" class="hidden-cell">
                <?php echo get_post_meta(get_the_ID(), "object_fotogr", true); ?>
            <div class="object-cell">
                <a id="<?php echo get_post_meta(get_the_ID(), "object_file", true); ?>">
                <?php the_post_thumbnail(array(80,80)); ?>
                <div class="object-cell-name"><?php echo get_post(get_post_thumbnail_id())->post_excerpt; ?> </div>
        } // end while loop
    } // end if


</div> <!-- object-selector-row -->
</div> <!-- object-selector -->

the CSS code is

.object-selector {
    /*position: relative;*/
    display: table;
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    /*margin: 0 0;*/
    height: 90;
    width: 100%;

.object-selector-row {
    display: table-row;
    width: 100%;
    margin: 0 0;
    padding: 0 0;


.object-cell {
    position: relative;
    display: table-cell;
    /*width: 80px;*/
    padding-left: 0;
    padding-right: 5px;
    opacity: 0.85;

.object-cell:hover {
    opacity: 1;

.object-cell-last {
    /*position: relative;*/
    display: table-cell;
    width: 5px;
    /*width: auto;*/

.object-cell-name {
    background: rgba(255, 255, 255, 0.6);
    position: absolute;
    bottom: 5px;
    left: 5px;
    padding-left: 3px;
    padding-right: 3px;

the weird part is the the width of the object-cell (table-cell) is set automatically even if if try to force to a lower value (I have trying to set it to 80px)

So my main problem is to understand why not all my posts are loaded (I have checked, I have 11 posts), and then when I manage to load them all how to modify my table so I can see them all. I have been trying to put smaller thumbnails but eventually I will have to add another line to the table.

Thank you very much for any help/hint that could be useful.

, , geotyr 4 years 2020-03-26T12:51:46-05:00 0 Answers 113 views 0

Leave an answer