Jump to content

Text and image "grow" when scrolling down from top of page on mobile

Recommended Posts

Site URL: https://www.campuspa.com/

If you visit the site on mobile, when you scroll down from the top of the page, the background image and header text "grows" a bit for the first ~1.5cm of scrolling before finalizing in a slightly larger size. It looks pretty messy and I can't figure out how to fix it. I thought it might have something to do with having a fixed header, but I tried changing the header settings to no avail.

Any suggestions greatly appreciated!

Link to comment
  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

Add to Home > Design > Custom CSS

/* header fixed padding */
@media screen and (max-width:767px) {
.header-announcement-bar-wrapper {
    padding: 6vw !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 year later...
4 hours ago, emilykrause said:

@fleet @tuanphan I have the same problem on multiple 7.1 sites...The content appears to get larger when scrolling only on mobile devices.  Do you know why this happens and how to fix it? For example, schrothdc.com 

Looks fine to me. Which text/image/page do you have problem?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
On 2/15/2022 at 2:07 PM, USER_SQUARESPACE said:

@emilykrause @tuanphan 
Thanks for the video and I immediately understood what you were talking about as we are experiencing the same (frustrating) issue. Once you have seen this issue on a mobile website, you cannot "unsee" it anymore...

When I checked the above-mentioned websites, seems like nobody was able to fix it? 
 

 

I think we can solve text problem, with image, I have no ideal now. If you need to fix, just share link to page where you have problem.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
On 1/5/2022 at 8:46 AM, emilykrause said:

@tuanphan Here's a video example of the content "zooming" on the homepage top section - this behavior only happens on mobile phone in the first sections of the page.

I have this same issue. I'm guessing the font and background are set to vh/vw. In chrome, that bottom mobile bar disappears causing the vh/w to change sizes. 

this helped fix the font, but not the background. haven't solved that yet

Link to comment

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.