Jump to content

Site header cutting the top off the below section

Recommended Posts

I'm having issues with the header and below section on mobile view. No issues at all on the desktop view!

On some of the pages, it's fine but on others, the header covers the below section.

I've tried 

/* Mobile - Move down top image */
@media screen and (max-width:767px) {
[data-section-id="650425d8b5cba227ad0c3b5a"] {
    margin-top: 100px;

It doesn't work properly?

Does anyone have any ideas? its driving me crazy.

Cheers

Link to comment
  • Replies 6
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

How you fix this depends on what is happening, can you share your website URL and what is getting cut off?

Do you have any other CSS that may be causing this problem?

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

Hiya Ziggy,

The URL is https://www.gavinalexander.photography/gallery

and the only CSS I have is:

h2 {
 text-shadow: 2px 4px black;
}
h1 {
 text-shadow: 2px 4px black;
}
.gallery-lightbox-background {
    opacity: 1 !important;
}
button.gallery-lightbox-close-btn {
    color: black !important;
}
}
  /* Mobile - Move down top image */
@media screen and (max-width:767px) {
[data-section-id="650425d8b5cba227ad0c3b5a"] {
    margin-top: 100px;

Link to comment

Firstly that code looks like it has syntax errors, in this case there are brackets in the wrong place, could you remove all of that temporarily? Then save and refresh the page.

I can see when inspecting the page where the problem is coming from, it the code highlighted yellow:

image.thumb.png.40941be065dac36e52ffdaa23e973c0e.png

When I remove that, the page works correctly:

image.thumb.png.606b530464a11aaa9b73bf31d43fdea2.png

I'm not sure where you have this code if it's not in Custom CSS, but there are only two places to check, in the settings for this page, look in Advanced and Header Code Injection, and in the main dashboard go to Website -> Website Tools, Code Injection.

Let me know if you find 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
3 minutes ago, GavinAlexanderPhoto said:

You superstar!!!

Thanks so much. Yes, I found it, I must have put it in there when I first started playing around with Squarespace and didn't have a clue how to use it hahaha!

THANKYOU 

Excellent! Well done finding that!

Can you mark my post as the solution and give it a like? Thanks!

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

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.