Jump to content

Header block jumps size upon scrolling on mobile device

Recommended Posts

Site URL: http://www.goodmajick.com/shop

Hello everyone,

I’m looking for help with a site-wide issue I’m having with my mobile layouts. (This only happens on mobile devices, and I can’t recreate it  with desktop/laptop browser inspect tools or by changing the width of the window to force the mobile layout)

When you scroll, the entire header block gets larger and smaller, and it pushes the content around on the page even far down when you’re scrolling the content jumps up and down. 
 

Thanks for any insight you can offer! 
This link demonstrates how the content jumps around as you keep scrolling, I think all due to that header growing and shrinking:  

http://www.goodmajick.com/shop-faq

Heres a demo of the phenomenon:

 

 

Link to comment
  • Replies 3
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

21 hours ago, goodmajick said:

Site URL: http://www.goodmajick.com/shop

Hello everyone,

I’m looking for help with a site-wide issue I’m having with my mobile layouts. (This only happens on mobile devices, and I can’t recreate it  with desktop/laptop browser inspect tools or by changing the width of the window to force the mobile layout)

When you scroll, the entire header block gets larger and smaller, and it pushes the content around on the page even far down when you’re scrolling the content jumps up and down. 
 

Thanks for any insight you can offer! 
This link demonstrates how the content jumps around as you keep scrolling, I think all due to that header growing and shrinking:  

http://www.goodmajick.com/shop-faq

Heres a demo of the phenomenon:

 

 

Have you solved this issue? I've tested in my laptop, my phone with some browser like:

- Chrome

- Opera

- Edge

- Firefox

All are fine

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace
🚀 Learn how to rank new pages on Google in 48 hours!

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

Link to comment
  • 4 weeks later...
On 11/17/2021 at 10:28 AM, bangank36 said:

Have you solved this issue? I've tested in my laptop, my phone with some browser like:

- Chrome

- Opera

- Edge

- Firefox

All are fine

Hi, friend. Thank you for taking the time to help! It has not been resolved. I was able to fix the heading text size with this bit of CSS:

/* MAJICK SHOPPE page heading fixed size mobile scrolling */
@media screen and (max-width:767px) {div#block-7f3799c9b1aaa41a9098 h1 {font-size: 62px !important;}}

But this only works to control the size of the text, and not the background/section block from growing and shrinking in size. I also need to create individual bits of code to target each page's headings.

Link to comment
  • 1 year 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.