Images change on mobile scroll

Site URL: https://goosebumps.marketing

I'm getting a weird thing where the images jumps to a few pixels bigger as you start to scroll on the mobile version of the site   (video attached). 

I'm using samsung internet browser & chrome browser on my samsung s23 ultra 

I just want it to look smooth and stay the same size as on load.

At the moment it looks terrible on scroll

Is there anyone on here that can fix this?

thanks loads

Danny

I'm not sure what would be causing that, custom code (from the other thread you have lots!) could be the problem, but also setup might be an issue. REally hard to say as I can't replicate it.

This can happen with images set to 'Fill,' since they grow to fit the space available. However, many mobile devices browsers change the available space due to the address bar being shown or not while you scroll. Try switching from 'Fill' to 'Fit' for the affected images. 

6 minutes ago, Ziggy said:

I'm not sure what would be causing that, custom code (from the other thread you have lots!) could be the problem, but also setup might be an issue. REally hard to say as I can't replicate it.

Hi mate thanks loads for your input. I found something similar to my problem on the forum, the solution offered as a code is something I'm confused by, may you have a look here:

the solution code is this below however I'm not sure how to apply it to my site

/* About page */
@media screen and (max-width:767px) {
[data-section-id="5ffd40ddf27d2765b8cd2d32"] {
    padding-top: 100.984px !important;
}
}

7 minutes ago, goosbumps said:

the solution code is this below however I'm not sure how to apply it to my site

/* About page */
@media screen and (max-width:767px) {
[data-section-id="5ffd40ddf27d2765b8cd2d32"] {
    padding-top: 100.984px !important;
}
}

I'm not sure about this as a solution, you would need to swap out your section ID to this:

[data-section-id="65bafafd6a3a794ff88a3b38"]

But the padding top won't be correct for your website, and I'm not convinced that this would solve it either way.

2 hours ago, e2astudio said:

This can happen with images set to 'Fill,' since they grow to fit the space available. However, many mobile devices browsers change the available space due to the address bar being shown or not while you scroll. Try switching from 'Fill' to 'Fit' for the affected images. 

thanks very much for your time... the fix involved removing the overlay effects, noise for the big go button & the liquid effect for the large black virus image

2 hours ago, Ziggy said:

I'm not sure about this as a solution, you would need to swap out your section ID to this:

[data-section-id="65bafafd6a3a794ff88a3b38"]

But the padding top won't be correct for your website, and I'm not convinced that this would solve it either way.

thanks for your time..... the fix involved removing the overlay effects, noise for the big go button & the liquid effect for the large black virus image