Jump to content

Images change on mobile scroll

Recommended Posts

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

Link to comment

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.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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;
}
}
Link to comment
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.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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

Link to comment
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 

Link to comment
  • 3 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.