Jump to content

CSS for hiding and revealing sections on mobile

Recommended Posts

Hi everyone.

 

I am trying to hide and reveal certain sections on mobile.

 

I used this code to do so:

 

@media only screen and(min-width:641px) {[mobile-data-section-id]{display:none}}
@media only screen and (max-width:640px) {[desktop-data-section-id]{display:none}}

 

However, when I try this with my hero section, the section that I want to reveal on mobile gets placed behind the header on mobile screens.

 

Any idea how to fix this?

 

https://semicircle-nectarine-t42g.squarespace.com/home-copy

 

1234567890

 

Thanks in advance.

 

Steve

Screenshot 2022-11-16 at 17.00.54.png

Screenshot 2022-11-16 at 17.00.43.png

Link to comment
21 hours ago, SteveBarrett said:

Hi everyone.

 

I am trying to hide and reveal certain sections on mobile.

 

I used this code to do so:

 

@media only screen and(min-width:641px) {[mobile-data-section-id]{display:none}}
@media only screen and (max-width:640px) {[desktop-data-section-id]{display:none}}

 

However, when I try this with my hero section, the section that I want to reveal on mobile gets placed behind the header on mobile screens.

 

Any idea how to fix this?

 

https://semicircle-nectarine-t42g.squarespace.com/home-copy

 

1234567890

 

Thanks in advance.

 

Steve

Screenshot 2022-11-16 at 17.00.54.png

Screenshot 2022-11-16 at 17.00.43.png

Try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  section[data-section-id="6374fc7c5a0ed22b244cbaa0"] {
    padding-top: 89.6406px;
  }
}

Support me by pressing 👍  or marking as solution if this useful for you

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

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

My testing

image.thumb.png.c75e69cffa1a106c6ecbd3044d76cb85.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

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

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.