Thin Vertical Line Appearing Between Product Cards on Hover (Horizon Theme / Product Slideshow)

[Kikinka]

Hello,

I’m using the Horizon theme and I have an issue with the product grid display on collection pages.

When I hover over a product card a very thin, vertical line appears on the right side of the hovered product card, right next to the next product. It is a left piece of following image.

The line is only visible when the next product photo has a colored background. The issue only occurs on products that use the product media slideshow (where the image changes on hover).

Could anyone help me find a solution for this problem? I’d really appreciate it.

Thank you.

[Moeed]

Hey @Kikinka

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[Kikinka]

Of course. It’s https://furenzy.cz/ and password is euwiam

[Moeed]

Hey @Kikinka

Follow these Steps:

1. Go to Online Store
2. Edit Code
3. Find theme.liquid file
4. Add the following code in the bottom of the file above </ body> tag

<style>
.product-media-container.media-fit img {
    object-fit: contain !important;
}
</style>

RESULT:

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed