Jump to content

Mobile specific section at top of page is disappearing under the header

Recommended Posts

Posted (edited)

Hi everyone,

just wondering if anyone has some suggestions...I designed a mobile specific section for the top of this homepage. And then I used code to hide it on desktop and appear when below 991px.

It shows up fine on mobile but when in between mobile and desktop sizes, it seems to be partially hidden under the header. The header is set to solid with reduced opacity. I thought perhaps it was because it was adaptive, but it isn't. 

So there must be something happening with the code...Here is what I used to initiate the swap of the two sections:

//hide top mobile section on desktop//
@media only screen and(min-width:991px) {section[data-section-id="6631d964f5a5214452e1d3fa"]{display:none}}

//hide top desktop section on tablet-mobile//
@media only screen and(max-width:990px) {section[data-section-id="6631d7e8482a5f08b86c7570"]{display:none}}

Photo attached of what it looks like.

site is: clinicaleftconnect.squarespace.com

password for website is cec2024

I really appreciate all you legends out there that save us code newbs in this forum!! Many thanks.

Cheers, ioana

Screenshot 2024-05-08 at 12.11.54 pm.png

Edited by ILong
Link to comment
  • Replies 1
  • Views 183
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

The first section has a top padding value to account for the header, you can simulate that with this additional CSS:

section[data-section-id="6631d964f5a5214452e1d3fa"] {
  padding-top:80px;
}

 

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.