Jump to content

Mobile responsive header: gap between menu and first section

Go to solution Solved by Ziggy,

Recommended Posts

Hi all,

When I pull up a few different pages of my website on mobile, there's a weird gap between my header / first section banner image, and the menu/navigation bar. This isn't the case in desktop mode. Any css that can help me address this? It only appears on some pages on mobile, so I don't think it's an underlying design/styles issue? It also doesn't show up when I preview the mobile appearance in Squarespace.

 

Any help appreciated! Attached are some example photos (the gap appears as a purple stripe).image.png.cd4493dc66243146689929b318a3076b.pngimage.png.a508ddcb1fef36d0dca43f3b7129d578.png

Link to comment
  • Solution

It looks like you have some custom CSS that is not doing what it's supposed to:

image.thumb.png.e4af8f26dbb14ff5ec66bae358a4cde5.png

If I remove the margin-top:60px; that gap goes away.

I'm not sure what the code is designed to do, but that is what is causing the problem.

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
🔌
 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 Did I help? Buy me a coffee?

Link to comment
15 minutes ago, paigesquarespace said:

Thank you SO much for finding that!! I appreciate it.

Not a problem! Glad to help!

Can you mark my post as the solution and give it a thumbs up too? Thanks!

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
🔌
 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 Did I help? Buy me a coffee?

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.