How can I fix a sticky product image issue in the Debutify theme?

Store Design
1

I look through the solution from other but still cannot find a right solution for my store.

From desktop view, it looks odd when I scroll down and half of the page had no image on the left as I have a long long product description on the right.

Tried to paste this code under theme.scss.liquid

@media(min-width:767px){ #site-main:has([data-product-wrapper] article .product-gallery){ overflow:unset !important } #site-main [data-product-wrapper] article .product-gallery{ position: sticky; top: 95px; height: fit-content; } }

But it did not work me.

My store URL is mcbabyshop dot com

2

Hello @mcbabyshop

Step 1: Go to Online Store → Theme → Edit code.
Step 2: Search file theme.scss
Step 3: Paste the below code at bottom of the file → Save

@media screen and (min-width: 769px){
    #shopify-section-product-template .product-wrapper >.grid__item {position: sticky; top: 00; height: fit-content;}
}
3

Thanks. It works perfectly.

Credit to Codewiser

1 Like
4

Could you check with me because i tried pasting it in my debutify code but its not working

5

@Markty

Sorry for the very late response.

Can you please share your store URL?