Sorting products makes space between cards smaller

shorty__ad · ‎04-02-2024

Hi everyone and thanks in advance for your help 🙂

Something weird is happening on my product grids when I sort the products using the Sort By options :

As you can see, the space between the product cards is deleted and cards touch each other. Now what's very weird is that it concerns only the third row of products. I have tried with bigger lists of products but it's always the third one that steps over the second (or get under it, I can't say). It only happens after I selected a sorting option in the Sort By menu... does anyone know why this happens and how to fix it ?

My test store link : https://cbdlissetheme.myshopify.com/
Password : teafla

ThePrimeWeb · ‎04-02-2024

Hey @shorty__ad,

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.scroll-trigger.animate--slide-in {
    transform: translateY(0) !important;
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

shorty__ad · ‎04-02-2024

Hello @ThePrimeWeb !
Your solution works, but the problem is that putting this code in the theme.liquid file disabled the slide-in animation, which I'd like to keep. But I found out how to solve this : I edited the class you suggested directly in base.css file like this :

And it now works exactly as I wanted 🙂

Thank you for your help and have a very good day !