[PALO ALTO] Problem displaying collection page

Hello to all,

I have a display problem in my catalog:

This only happens when I filter the catalog, and only 2 product lines remain.

URL : https://jitensha-tokyo-paris.myshopify.com/collections/cadre-tokyo/cadre_tokyo+couleur_chrome+technologie_ebike?sort_by=best-selling

My bottom block should be the same shape as the one at the top of the page. It is trimmed at the top and bottom when there are two product lines.

Anyone had this problem too ?

Thank you in advance,

Best,

Hi @MaxCosta ,

Go to Assets > theme.css and paste this at the bottom of the file:

@media only screen and (min-width: 768px) {
  .collection__products>.grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
  }
  .collection__products .product-grid-image,
  .collection__products .product-grid-item {
    width: calc(100%/3 - 20px) !important;
  }
}

Hope it helps!

Hello @LitCommerce I have the impression that it works, but it causes me the bug again when I have more than one product line:

I can’t figure it out :confused:

Thanks in advance

Hi @MaxCosta .,

Can you explain more about the error, I checked the screenshot you sent and it shows fine

@LitCommerce

It’s the same problem as at the beginning except that it doesn’t happen when I have 2 product lines, but only 1.

On the screen below, we can see that the lower block is cropped (when it should be the same size as the upper block).

I don’t know if you can see what I mean
I can make an illustration if you need it

Thank you in advance,

MC

Hi @MaxCosta ,

Please add code:

@media only screen and (min-width: 768px) {
  .collection__products .product-grid-image {
        min-height: 500px;
  }
}

Hope it helps!

Hi @LitCommerce

It’s same, you can check with these filters: https://jitensha-tokyo-paris.myshopify.com/collections/velos/cadre_paris+technologie_single-speed?sort_by=manual

Best regards,

MC