Product image fitting inside collection page

[Kogun1]

Hello,

Recently I’ve ran into an issue where my product images in the collection page fit awkwardly inside the borders. Furthermore, whenever you click into a product page the grey background disappears. Is there a quick fix to this?

My store URL: https://stronos.shop/collections/sweaters
Password: GWR

Reference: https://www.daxuen.com/collections/sweaters-vest

[Dan-From-Ryviu]

Hi @Kogun1

Go to your Online store > Themes > Edit code > open theme.liquid file, add this code below after element

<style>
.product .flickity-viewport span.nt_bg_lz:after,
.product .flickity-viewport .img_ptw:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #0000001a;
}
</style>

[PageFly-Richard]

Hi @Kogun1

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: found style.min.css and add code at last line.

product .flickity-viewport span.nt_bg_lz:after,
.product .flickity-viewport .img_ptw:after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: #0000001a !important;
}

Hope this can help you solve the issue

Best regards,

Richard | PageFly

[niraj_patel]

Hello @Kogun1

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

.ss_pro_grid .product-image .pr_lazy_img{ padding-top: 100% !important; }

[Kogun1]

This fixed the grey background issue, thanks!