Update Problem: Only show the first rows of the thumbnail grid

[ruwie]

have a problem after the last update:

I use the thumbnail grid to show news articles. So that not all news articles are displayed, I have limited the number by CSS and always show the first 2 rows.

This has always worked so far. Only now the .thumbnail-wrap simply move out of the parent-class and are displayed below each other. I don't understand it exactly because all suddenly all .thumbnailgrid-row after the first 2 disappear.

Example of what it looks like without CSS:

<div class="thumbnail-collection">
  <div class="thumbnailgrid-row top-aligned">
     <div class="thumbnail-wrap" style="..."></div>
     <div class="thumbnail-wrap" style="..."></div>
     <div class="thumbnail-wrap" style="..."></div>
     <div class="thumbnail-wrap" style="..."></div>
  </div>
  <div class="thumbnailgrid-row top-aligned">
     <div class="thumbnail-wrap" style="..."></div>
     <div class="thumbnail-wrap" style="..."></div>
     <div class="thumbnail-wrap" style="..."></div>
     <div class="thumbnail-wrap" style="..."></div>
  </div>
  <div class="thumbnailgrid-row top-aligned">
     <div class="thumbnail-wrap" style="..."></div>
     <div class="thumbnail-wrap" style="..."></div>
     <div class="thumbnail-wrap" style="..."></div>
     <div class="thumbnail-wrap" style="..."></div>
  </div>
...
</div>

so everything looks right, now I want to show only the first two rows and enter the css (worked before):

div.thumbnailgrid-row:nth-child(n+3) {
    display:none;
}

then the code breaks and it looks like this:

<div class="thumbnail-collection">
  <div class="thumbnailgrid-row top-aligned">
    <div class="thumbnail-wrap" style="..."></div>
    <div class="thumbnail-wrap" style="..."></div>
    <div class="thumbnail-wrap" style="..."></div>
    <div class="thumbnail-wrap" style="..."></div>
  </div>
  <div class="thumbnailgrid-row top-aligned">
    <div class="thumbnail-wrap" style="..."></div>
    <div class="thumbnail-wrap" style="..."></div>
    <div class="thumbnail-wrap" style="..."></div>
    <div class="thumbnail-wrap" style="..."></div>
  </div>
  <div class="thumbnail-wrap" style="..."></div>
  <div class="thumbnail-wrap" style="..."></div>
  <div class="thumbnail-wrap" style="..."></div>
  <div class="thumbnail-wrap" style="..."></div>
  <div class="thumbnail-wrap" style="..."></div>
  <div class="thumbnail-wrap" style="..."></div>
  <div class="thumbnail-wrap" style="..."></div>
  <div class="thumbnail-wrap" style="..."></div>
...
</div>

so after the first 2 rows, all thumbnail-wraps are displayed one below the other. don't really understand this if i'm honest....

is there a solution?

Best R

[Richard]

Dear R

@ruwie

Could you please post a link to your website with the News / Thumbnail Grid in question.

---

Talk soon & have a wonderful day

Richard

[ruwie]

@Richard
Here is the Link:
https://bit.ly/3y5Kwjs

Best

[Richard]

Dear Ruwie

@ruwie

I think i may have to forward this one to Armin for further insight relating to the new WooCommerce integration and how this has changed things. Sorry for the inconvenience.

---

Talk soon & thank you for supporting Laytheme Ruwie 🌝

Sincerely

Richard

[arminunruh]

can you send your website address, /wp-admin/ username and password and a link to this topic to info@laytheme.com?