Smooth scrolling when viewing a specific item (dawn theme)

[ypcollective]

After selecting an item on my website, at first you could smoothly scroll through the images on both pc and mobile however once you reach the bottom of the page and scroll back up, the images of the item appear differently ie from this : 

to this : 

Balenciaga Green Ripped Pocket Tape Hoodie Summer '24 - YP Collective – Young Professionals Collecti...

This happens for all items but here is one to test it out on. TIA

[vinh0225 · Accepted solution]

Please try to remove or make this code comment in assets/base.css.

@media screen and (min-width: 750px) {
    .grid--2-col-tablet .grid__item {
        /* width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2); */
    }
}

[vinh0225]

Hi, @ypcollective 

It seems like the CSS is not set correctly.

I can check this issue.

[ypcollective]

Id really appreciate it, if you need me to help out in any way just let me know. 

[vinh0225 · Accepted solution]

Please try to remove or make this code comment in assets/base.css.

@media screen and (min-width: 750px) {
    .grid--2-col-tablet .grid__item {
        /* width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2); */
    }
}

[ypcollective]

It worked for pc , but hasnt been fixed for mobile . please check it 

[vinh0225]

I can see this on mobile. How should it work?

[ypcollective]

It should remain like this and the image display shouldnt change

[vinh0225 · Accepted solution]

Please try disable or make comment for margin-left: 1.5rem; in assets/base.css.

And add width: 100%; instead.

@media screen and (max-width: 749px) {
    .grid--peek.slider .grid__item:first-of-type {
        /* margin-left: 1.5rem; */
        width: 100%;
    }
}

[ypcollective]

Thank you this worked , and i removed "first-of-type" since it was only working for the first image but now it works for all. Appreciate your help Vinh. Thank you