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
http://www.puigciutat.com/museu-virtual/
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>
<?php
    $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>
            <div id="t_<?php echo get_post_meta(get_the_ID(), "object_file", true); ?>" class="hidden-cell">
                <?php the_title(); ?>
            </div>
            <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>
            <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>
                </a>
            </div>                      
            <?php
        } // end while loop
    } // end if

    wp_reset_postdata();
?>

</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.