Jump to content

Hiding section on mobile causes section to move into header space

Go to solution Solved by Ziggy,

Recommended Posts

I'm working on a site where I want different text sections to show depending on whether it's displayed on mobile or desktop. To achieve this, I use code from @tuanphan found on this forum:

/* Hide this on Mobile */
@media screen and (max-width:767px) {
    section[data-section-id="65a90fba666ba066ad4a4ee9"]{
        display: none;
    }
}

/* Hide this on Tablet - Desktop */
@media screen and (min-width:768px) {
    section[data-section-id="65a90ce4531574783e83ad15"] {
        display: none;
    }
}

In both cases, it works to hide one of the sections for the media format in case. However, on desktop, it also causes the text section to move up into the header space (see screenshots, the lower one is a reference for how the rest of the projects looks, which is how I want it) - something that hasn't been an issue before on the site. What might the problem be here? The mobile version looks good.

 

 

 

Edited by DangDang
Link to comment
  • Solution

This is probably happening because there is padding applied to the first section on any page to give space for the header. It may improve the situation to swap the sections around to put the desktop section at the top. You could also add a couple of rows to the top of the mobile section (on the mobile view) to account for that lack of padding.

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
17 hours ago, Ziggy said:

You could also add a couple of rows to the top of the mobile section (on the mobile view) to account for that lack of padding.

Yes, that's what I ended up doing! Switching the sections so the mobile version moved up into the header space, and added three rows in the top of the section

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.