Several rows don't display the right number of products (Simple theme)

Technical Q&A
1

Dear community,

While setting my shop with simple theme, I found a problem with products showcase in several rows, first it was showcasing everythig perfectly and then suddenly there were several raws with blank spaces instead of products.

I was surfing the web for any possible explanation or solution; found one but it only solved the first row problem, leaving the others with no changes (with blank spaces).

Appreciate any help!

My shop link here: https://www.vanloving.com/

Screenshot:

CUADRADO.jpg
CUADRADO.jpg3000×3000 236 KB

2

This happens in some themes for various reasons with the width of some product “cards” being too wide, or items being injected on the frontend.

Various reasons:

  • an issue with the CSS grid
  • The original images could all being different aspect ratios so some end up wider than others somehow.
  • Product titles are excessively long.
  • Apps are adding UI elements increasing the widths.
  • theme code has been modified messing up logic normally puts styles in place controlling product display on each row
  • javascript errors are interfering with javascript that normally modifies the product cards to be the right dimensions
  • animations are causing layout issues
  • elements, product cards, are being added after the page renders or is loaded

It looks like for some reason it’s choosing every 5th product to reset where the row starts instead of every 4th product with this CSS rule

.grid–uniform .medium-up–one-third:nth-child(3n+1)

If you need this debugged you can reach out to me at paull.newton+shopifyforums@gmail.com with details.

3

Hi Paul,

Appreciate your observations!

The solution I found was this:

@media only screen and (min-width: 750px){
.grid–uniform .medium-up–one-half:nth-child(2n+1),
.grid–uniform .medium-up–one-third:nth-child(3n+1),
.grid–uniform .medium-up–one-quarter:nth-child(4n+1),
.grid–uniform .medium-up–one-fifth:nth-child(5n+1),
.grid–uniform .medium-up–one-sixth:nth-child(6n+1),
.grid–uniform .medium-up–two-sixths:nth-child(3n+1),
.grid–uniform .medium-up–three-sixths:nth-child(2n+1),
.grid–uniform .medium-up–two-eighths:nth-child(4n+1),
.grid–uniform .medium-up–four-eighths:nth-child(2n+1),
.grid–uniform .medium-up–five-tenths:nth-child(2n+1),
.grid–uniform .medium-up–one-twelfth:nth-child(12n+1),
.grid–uniform .medium-up–two-twelfths:nth-child(6n+1),
.grid–uniform .medium-up–three-twelfths:nth-child(4n+1),
.grid–uniform .medium-up–four-twelfths:nth-child(3n+1),
.grid–uniform .medium-up–six-twelfths:nth-child(2n+1)
{clear: unset !important;}
}

After adding it at the end of theme.scss.liquid the majority of pages started to show correct. Nevertheless, there are still some pages that continue with the same bug … very strange.

What kind of details you need me to send you to debug this?